Come creare bordi inclinati con i CSS

In questo post, vedremo come possiamo creare un effetto di bordo angolato (orizzontalmente) su una pagina web. Fondamentalmente, sembra qualcosa del genere:

Avere un bordo leggermente angolato dovrebbe rendere il nostro layout del web meno rigido e noioso. Per fare questo trucco, utilizzeremo gli pseudo-elementi ::before e ::after e CSS3 Transform .

Usando Pseudo Elements

Questa tecnica usa gli pseudo-elementi ::before e ::after 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: ''; larghezza: 100%; altezza: 100%; posizione: assoluta; sfondo: ereditario; z-index: -1; fondo: 0; trasformazione-origine: fondo sinistro; trasformare: skewY (3deg); } 

Ricapitoliamo.

L' transform-origin specifica le coordinate dell'elemento che vogliamo trasformare. Nell'esempio sopra abbiamo specificato il left bottom che inserirà le coordinate iniziali sul lato in basso a sinistra del blocco.

La transform: skewY(3deg); rende il ::after block skew o angle a 3 gradi. Poiché abbiamo specificato la coordinata di partenza come in basso a sinistra, la parte in basso a destra del blocco aumenta di 3 gradi. Se scambiamo l' transform-origin della transform-origin in right bottom a right bottom e l'angolo in basso a sinistra verrà 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: ''; larghezza: 100%; altezza: 100%; posizione: assoluta; sfondo: ereditario; z-index: -1; transizione: facilità tutti gli .5s; } @if $ pos-top {& :: before {@if $ pos-top == 'topleft' {top: 0; transform-origin: a destra in alto; trasformare: skewY ($ angle-top); } @if $ pos-top == 'topright' {top: 0; trasformazione-origine: sinistra in alto; transform: skewY (- $ angle-top); }}} @if $ pos-btm {& :: after {@if $ pos-btm == 'bottomleft' {bottom: 0; trasformazione-origine: fondo destro; transform: skewY (- $ angle-btm); } @if $ pos-btm == 'bottomright' {bottom: 0; trasformazione-origine: fondo sinistro; transform: skewY ($ angle-btm); }}}} 

Ci sono quattro variabili nel mixin. Le prime due variabili, $pos-top e $angle-top, specificano la coordinata di partenza superiore e il grado . Le ultime due variabili specificano la coordinata e il grado per il lato inferiore .

Se si riempiono tutte e quattro le variabili, è possibile inclinare entrambi i lati - superiore e inferiore - dell'elemento.

Usa la sintassi Sass @include per inserire il mixin in un elemento. Puoi vedere esempi di seguito:

Per aggiungere un bordo inclinato in alto a sinistra :

 .block {@include angle-edge (topleft, 3deg); } 

Per aggiungere un bordo inclinato in basso a destra :

 .block {@include angle-edge (bottom right, 3deg); } 

Per aggiungere un bordo inclinato in alto a sinistra e in basso a destra :

 .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!

10 strumenti di raschiatura del Web per estrarre dati online

Gli strumenti di scraping Web sono sviluppati specificamente per l'estrazione di informazioni dai siti Web. Sono anche conosciuti come strumenti per il web harvesting o strumenti per l'estrazione di dati web. Questi strumenti sono utili per chiunque cerchi di raccogliere una qualche forma di dati da Internet

(Consigli tecnici e di design)

I 10 migliori scambi di Ethereum per acquistare e vendere ETH

Ethereum è una delle criptovalute più in crescita negli ultimi tempi. E se non vedi l'ora di investire nella prima rete di computing peer-to-peer al mondo, allora non sei l'unico. Chiunque comprenda la tecnologia alla base di Ethereum e l'interruzione che potrebbe portare in futuro, vuole investire o ha già investito in essa.Da

(Consigli tecnici e di design)