Share
In questo tutorial imparerai tre modi per creare semplici bordi angolati usando SVG. Per cominciare useremo un SVG in linea, quindi useremo uno sfondo SVG su uno pseudo-elemento, prima di terminare con un mixin di Sass. Tuffiamoci dentro!
Quando dico "bordi angolati" mi riferisco a cose come lo sfondo sul sito web di Stripe:
stripe.comO gli overlay su questo sito:
skidpasset.seQuesti sarebbero abbastanza facili da creare usando un'applicazione grafica; puoi creare il disegno, esportarlo come un singolo elemento grafico e caricarlo nella tua pagina web. Tuttavia, se vuoi maggiore flessibilità, dovresti dimenticare questo approccio. Diamo un'occhiata ad alcuni modi alternativi per ottenere i bordi angolati.
Prima di andare avanti, se hai bisogno di ricordare a te stesso le nozioni di base su cui è coinvolto SVG codificante a mano, Kezz ti ha spiegato:
Iniziamo con un SVG, all'interno di un contenitore, nel nostro markup:
Torneremo ai dettagli di ciò che abbiamo fatto in un momento. Ora aggiungi alcuni stili di base per dare al nostro eroe alcune dimensioni e uno sfondo sfumato:
body background-color: #eaeaea; .hero position: relativo; altezza: 300 px; background-image: linear-gradient (# 4568dc, # b06ab3);
Questo ci dà il seguente:
Ma immaginiamo di voler avere quel bordo inferiore come un angolo che sale verso la destra. Lo faremo con il nostro SVG. In esso, creeremo un poligono con alcune coordinate punto:
Ora vedrai un grande triangolo nero nella parte in basso a destra della pagina. Attraverso il nostro CSS possiamo modellare quel triangolo in base alle nostre esigenze, riempiendolo come il nostro sfondo così l'eroe sembra essere stato affettato in basso:
svg position: absolute; fondo: 0; larghezza: 100%; altezza: 10vw; riempire: #eaeaea;
Questo ci dà:
Il nostro secondo approccio migliora in primo luogo, in quanto il contenuto all'interno dell'area grigia non verrà troncato sovrapponendo un triangolo grigio. Ci ritroveremo con un semplice contenitore div:
Questa volta controlleremo il mascheramento dal nostro CSS, iniziando dagli stili degli eroi che abbiamo utilizzato nell'ultima demo:
body background-color: #eaeaea; .hero position: relativo; altezza: 300 px; background-image: linear-gradient (# 4568dc, # b06ab3);
Ora aggiungeremo uno pseudo-elemento al nostro eroe, al quale aggiungeremo SVG come immagine di sfondo. Innanzitutto, dovremo codificare il nostro SVG in modo che possiamo effettivamente usarlo in CSS. Quindi prendi il codice SVG che abbiamo scritto l'ultima volta, modifica i punti su 0,0 100,0 0,100 per girarlo, vai su URL-encoder per SVG e incolla il contenuto nella casella:
Copia il Pronto per i CSS snippet e incollalo negli stili pseudo-elementi:
Accentsconagua
.hero :: after background-image: url ("data: image / svg + xml,% 3Csvg xmlns =" http://www.w3.org/2000/svg "viewBox =" 0 0 100 100 "preserveAspectRatio =" none "% 3E% 3Cpolygon points =" 0,0 100,0 0,100 "/% 3E% 3C / svg% 3E"); Puoi anche aggiungere un riempimento =" attributo se ti piace, dopo il viewBox attributo per esempio. Aggiungi altre proprietà per posizionare e dimensionare lo pseudo-elemento:
.hero :: after background-image: url ("data: image / svg + xml,% 3Csvg xmlns =" http://www.w3.org/2000/svg "viewBox =" 0 0 100 100 "fill =" pomodoro "preserveAspectRatio =" none "% 3E% 3Cpolygon points =" 0,0 100,0 0,100 "/% 3E% 3C / svg% 3E"); posizione di sfondo: centro; background-repeat: no-repeat; formato di sfondo: 100% 100%; contenuto: "; altezza: 10vw; larghezza: 100%; posizione: assoluta; in basso: -10vw;Questo ci dà questo:
Grazie ai nostri colori Ziggy Stardust possiamo vedere chiaramente il nostro SVG come questo. Ora abbiamo solo bisogno di colorare il triangolo (usando il riempimento =" attributo) in modo che sia dello stesso colore del viola nella parte inferiore del gradiente:
Nota: grazie a Bob Proctor per aver sottolineato che i valori esadecimali nell'attributo fill non sembrano essere riconosciuti da FireFox. Dovrai utilizzare RGB, o HSL o nomi di valori.
C'è una ragione che abbiamo usato vw unità per l'altezza del nostro SVG: vogliamo che l'angolo del nostro triangolo rimanga costante indipendentemente dalla larghezza della finestra. Se dovessimo usare px unità, l'altezza del triangolo non cambierebbe per gli schermi più stretti, il che renderebbe l'angolo del triangolo più acuto. Prova tu stesso!
Questo approccio finale usa un mixin di Sass per fare tutto il sollevamento pesante, ma in sostanza raggiunge quello che abbiamo fatto nell'esempio precedente. Vai al repository GitHub di Angled Edges, prendi il mixin e includilo nel tuo progetto (ho intenzione di incollare il tutto nella finestra SCSS di un progetto CodePen).
Successivamente, aggiungi il nostro vecchio amico l'eroe div al tuo markup. Aggiungi anche gli stili di base, in modo da ottenere il solito effetto sfumatura di 300 pixel.
Quindi, dentro il nostro .eroe aggiungiamo il mixin:
@ include il bordo angolato ();
I parametri di cui abbiamo bisogno sono i seguenti: abbiamo bisogno che il nostro triangolo sia al di fuori l'eroe, al parte inferiore. La posizione del punto in cui inizia l'angolo è in basso a destra, il colore che vogliamo è il viola # b06ab3, e quindi l'altezza del triangolo sarà 100. La limitazione di ciò è che il mixin non accetta valori relativi per l'altezza o la larghezza.
Il nostro mixin ha questo aspetto:
@include-angle-edge ("outside bottom", "in basso a destra", # b06ab3, 100);E questo è ciò che otteniamo:
Per maggiori dettagli sui parametri disponibili, controlla il repository GitHub. Grazie a Joseph Fusco per il suo duro lavoro.
Quindi ce l'abbiamo; tre metodi per ottenere bordi angolati. Ognuno ha i suoi meriti, e la pratica di ognuno vi darà una solida comprensione di come gli SVG possono essere manipolati per effetto visivo.
