Come creare bordi inclinati con i CSS
In questo post, vedremo come possiamo creare un effetto di bordo ad angolo (in orizzontale) su una pagina web. Fondamentalmente, sembra qualcosa del genere:
Avere un angolo leggermente inclinato dovrebbe rendere il nostro layout del web meno rigido e noioso. Per fare questo trucco, useremo il pseudo-elementi ::prima e ::dopo e Trasformazione CSS3.
Usando Pseudo Elements
Questa tecnica usa gli pseudo-elementi ::prima e ::dopo per angolare i bordi dell'elemento. In questo esempio, regoleremo il bordo inferiore.
.block height: 400px; larghezza: 100%; posizione: relativa; sfondo: gradiente lineare (a destra, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY (3deg);
Ricapitoliamo.
Il trasformare origine specifica le coordinate dell'elemento che vogliamo trasformare. Nell'esempio sopra specificato a sinistra in basso questo metterà le coordinate iniziali sul lato in basso a sinistra del blocco.
Il trasformare: skewY (3deg); rende il ::dopo blocco inclinazione o angolo a 3 gradi. Poiché abbiamo specificato la coordinata di partenza come in basso a sinistra, l'angolo in basso a destra del blocco aumenta di 3 gradi. Se scambiamo il trasformare origine a in basso a destra e l'angolo in basso a sinistra sarà sollevato di 3 gradi.
Puoi aggiungere uno sfondo a tinta unita o una sfumatura per vedere il risultato.
Rendilo più facile con Sass Mixin
Per semplificare, ho creato un mixin di Sass per aggiungere i bordi angolati, meno i mal di testa dall'affrontare le complessità delle regole di stile. Con il seguente mixin puoi specificare rapidamente il lato - in alto a sinistra, in alto a destra, in basso a sinistra o in basso a destra - per inclinare.
@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; posizione: relativa; sfondo: gradiente lineare (a destra, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; transition: facilità tutti .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: right top; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: left top; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transform-origin: left bottom; transform: skewY ($ angle-btm);
Ci sono quattro variabili nel mixin. Le prime due variabili, $ Pos-top e $ Angle-top, specificare la coordinata di partenza superiore e il grado. Le ultime due variabili specificano il coordinata e il grado per il parte inferiore lato.
Se si riempiono tutte e quattro le variabili, è possibile inclinare entrambi i lati - superiore e inferiore - dell'elemento.
Usa il Sass @includere sintassi per inserire il mixin in un elemento. Puoi vedere esempi di seguito:
Per aggiungere un bordo inclinato in alto a sinistra lato:
.block @include angle-edge (topleft, 3deg);
Per aggiungere un bordo inclinato in basso a destra lato:
.block @include angle-edge (bottomright, 3deg);
Per aggiungere un bordo inclinato in alto a sinistra e in basso a destra lato:
.block @include angle-edge (topleft, 3deg, bottomright, 3deg);
Di seguito la demo con i mixin applicati. Cambia la casella di selezione per passare a un altro stile.
Questo è tutto!
