Come funzionano i triangoli CSS?

Ci sono un sacco di diverse forms CSS su CSS Tricks – Shapes of CSS e sono particolarmente perplesso con un triangolo:

Triangolo CSS

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 
 

Come e perché funziona?

CSS Triangles: A Tragedy in Five Acts

Come ha detto alex , i bordi di uguale larghezza si scontrano l’un l’altro a 45 gradi:

i bordi si incontrano a 45 gradi, il contenuto nel mezzo

Quando non hai un bordo superiore, sembra che questo:

nessun confine superiore

Quindi gli dai una larghezza di 0 …

senza larghezza

… e un’altezza di 0 …

neanche l'altezza

… e infine, rendi trasparenti i due bordi laterali:

bordi laterali trasparenti

Ciò si traduce in un triangolo.

I bordi usano un bordo inclinato dove si intersecano (angolo di 45 ° con bordi di larghezza uguale, ma cambiando le larghezze del bordo è ansible inclinare l’angolo).

Esempio di confine

jsFiddle .

Nascondendo determinati bordi, puoi ottenere l’effetto triangolo (come puoi vedere sopra facendo delle diverse porzioni colors diversi). transparent è spesso usato come colore del bordo per ottenere la forma triangular.

Inizia con un quadrato di base e bordi. A ciascun bordo verrà assegnato un colore diverso in modo che possiamo distinguerli:

 .triangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; } 

che ti dà questo :

quadrato con quattro bordi

Ma non è necessario il bordo superiore, quindi imposta la sua larghezza su 0px . Ora il nostro bordo inferiore di 200px renderà il nostro triangolo alto 200 px.

 .triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } 

e otterremo questo :

metà inferiore del quadrato con quattro bordi

Quindi per hide i due triangoli laterali, imposta il colore del bordo su trasparente. Dal momento che il bordo superiore è stato effettivamente eliminato, possiamo anche impostare il colore del bordo superiore trasparente.

 .triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } 

finalmente otteniamo questo :

bordo inferiore triangolare

Approccio diverso:

I triangoli CSS3 con trasformazione ruotano

La forma triangular è abbastanza facile da usare con questa tecnica. Per le persone che preferiscono vedere un’animazione che spiega come funziona questa tecnica qui è:

animazione gif: come far ruotare un triangolo con trasformazione

  • Link alla ANIMAZIONE: come fare un triangolo CSS3 .
  • E DEMO: i triangoli CSS3 realizzati con la trasformazione ruotano.

Altrimenti, ecco una spiegazione dettagliata in 4 atti (questa non è una tragedia) su come creare un triangolo rettangolo isoscele con un elemento.

  • Nota 1: per triangoli non isosceli e cose fantasiose, puoi vedere il punto 4 .
  • Nota 2: nei seguenti frammenti, i prefissi del venditore non sono inclusi. sono inclusi nelle demo dei codepen .
  • Nota 3: l’HTML per la seguente spiegazione è sempre:


PASSO 1: Crea un div

Facile, assicurati solo che la width = 1.41 x height . Puoi usare qualsiasi tecnica ( vedi qui ) incluso l’uso di percentuali e imbottitura in basso per mantenere le proporzioni e creare un triangolo reattivo . Nell’immagine seguente, il div ha un bordo giallo dorato.

In quel div, inserire uno pseudo elemento e assegnargli il 100% di larghezza e altezza del genitore. L’elemento pseudo ha uno sfondo blu nell’immagine seguente.

Creazione di un triangolo CSS con passaggio di trasformazione 1

A questo punto, abbiamo questo CSS :

 .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr: before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; } 

PASSO 2: ruotiamo

Innanzitutto, la cosa più importante: definire un’origine di trasformazione . L’ origine di default è al centro dello pseudo elemento e ne abbiamo bisogno in basso a sinistra. Aggiungendo questo CSS allo pseudo elemento:

transform-origin:0 100%; o transform-origin: left bottom;

Ora possiamo ruotare lo pseudo elemento di 45 gradi in senso orario con transform : rotate(45deg);

Creazione di un triangolo con CSS3 passo 2

A questo punto, abbiamo questo CSS :

 .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } 

PASSO 3: nascondilo

Per hide le parti indesiderate dello pseudo elemento (tutto ciò che trabocca il div con il bordo giallo) è sufficiente impostare l’ overflow:hidden; sul contenitore. dopo aver rimosso il bordo giallo, ottieni … un TRIANGOLO ! :

DEMO

Triangolo CSS

CSS:

 .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; overflow: hidden; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } 

PASSO 4: andare oltre …

Come mostrato nella demo , puoi personalizzare i triangoli:

  1. Rendili più sottili o più piatti giocando con skewX() .
  2. Falli puntare a sinistra, a destra o in qualsiasi altra direzione, giocando con la trasformazione orign e la direzione di rotazione.
  3. Fai qualche riflessione con la proprietà di trasformazione 3D.
  4. Dare i bordi del triangolo
  5. Metti un’immagine nel triangolo
  6. Molto di più … Scatena i poteri del CSS3 !

Perché usare questa tecnica?

  1. Il triangolo può essere facilmente reattivo.
  2. Puoi creare un triangolo con un bordo .
  3. Puoi mantenere i confini del triangolo. Ciò significa che è ansible triggersre lo stato di hover o fare clic sull’evento solo quando il cursore si trova all’interno del triangolo . Questo può diventare molto utile in alcune situazioni come questa in cui ogni triangolo non può sovrapporsi ai vicini in modo che ogni triangolo abbia il proprio stato di hover.
  4. Puoi creare effetti fantastici come i riflessi .
  5. Ti aiuterà a capire le proprietà di trasformazione 2d e 3d.

Perché non usare questa tecnica?

  1. Lo svantaggio principale è la compatibilità del browser , le proprietà di trasformazione 2d sono supportate da IE9 + e quindi non è ansible utilizzare questa tecnica se si intende supportare IE8. Vedi CanIuse per maggiori informazioni. Per alcuni effetti di fantasia che utilizzano trasformazioni 3D come il supporto del browser di riflessione è IE10 + (vedi canIuse per maggiori informazioni).
  2. Non hai bisogno di nulla di reattivo e un triangolo normale va bene per te allora dovresti andare per la tecnica di confine spiegata qui: una migliore compatibilità con il browser e più facile da capire grazie ai post di amaizing qui.

Ecco un’animazione in JSFiddle che ho creato per la dimostrazione.

Vedi anche lo snippet qui sotto.

Questa è una GIF animata composta da uno Screencast

Gif Animate di Triangolo

 transforms = [ {'border-left-width' :'30', 'margin-left': '70'}, {'border-bottom-width' :'80'}, {'border-right-width' :'30'}, {'border-top-width' :'0', 'margin-top': '70'}, {'width' :'0'}, {'height' :'0', 'margin-top': '120'}, {'borderLeftColor' :'transparent'}, {'borderRightColor' :'transparent'} ]; $('#a').click(function() {$('.border').trigger("click");}); (function($) { var duration = 1000 $('.border').click(function() { for ( var i=0; i < transforms.length; i++ ) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) 
 .border { margin: 20px 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } 
   Click it!

Diciamo che abbiamo la seguente div:

 

Ora modifica la procedura passo passo, in modo da farti un’idea chiara di ciò che sta accadendo in giro

PASSO 1: JSfiddle Link:

  #triangle { background: purple; width :150px; height:150PX; border-left: 50px solid black ; border-right: 50px solid black; border-bottom: 50px solid black; border-top: 50px solid black; } 

Questo è un semplice div. Con un CSS molto semplice. Quindi un laico può capire. Div ha dimensioni 150 x 150 pixel con il bordo di 50 pixel. L’immagine è allegata:

inserisci la descrizione dell'immagine qui

PASSAGGIO 2: collegamento JSfiddle:

 #triangle { background: purple; width :150px; height:150PX; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } 

Ora ho appena cambiato il colore del bordo di tutti e 4 i lati. L’immagine è allegata.

inserisci la descrizione dell'immagine qui

PASSAGGIO: 3 JSfiddle Link:

 #triangle { background: purple; width :0; height:0; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } 

Ora ho appena cambiato l’altezza e la larghezza di div da 150 pixel a zero. L’immagine è allegata

inserisci la descrizione dell'immagine qui

PASSO 4: JSfiddle:

 #triangle { background: purple; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } 

Ora ho reso tutti i bordi trasparenti oltre al bordo inferiore. L’immagine è allegata qui sotto.

inserisci la descrizione dell'immagine qui

PASSAGGIO 5: collegamento JSfiddle:

 #triangle { background: white; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } 

Ora ho appena cambiato il colore di sfondo in bianco. L’immagine è allegata.

inserisci la descrizione dell'immagine qui

Quindi abbiamo ottenuto il triangolo di cui avevamo bisogno.

E ora qualcosa di completamente diverso …

Invece di usare i trucchi css, non dimenticare le soluzioni semplici come le entity framework html:

  

Risultato:

Vedi: Quali sono le entity framework HTML per i triangoli su e giù?

Considera il triangolo sottostante

 .triangle { border-bottom:15px solid #000; border-left:10px solid transparent; border-right:10px solid transparent; width:0; height:0; } 

Questo è ciò che ci viene dato:

Uscita a triangolo piccolo

Perché è uscito in questa forma? Il diagramma seguente spiega le dimensioni, nota che 15px è stato utilizzato per il bordo inferiore e 10px è stato utilizzato per sinistra e destra.

Grande triangolo

È abbastanza facile creare un triangolo ad angolo retto anche rimuovendo il bordo destro.

Triangolo ad angolo retto

Facendo un ulteriore passo avanti, usando il css basato su questo ho aggiunto frecce alla mia schiena e ai pulsanti successivi (sì, so che non è cross-browser al 100%, ma nerastro).

 .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin:20px auto; } .triangle-down { border-bottom:none; border-top: 100px solid red; } .triangle-left { border-left:none; border-right: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-right { border-right:none; border-left: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-after:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; margin:0 5px; content:""; display:inline-block; } .triangle-after-right:after { border-right:none; border-left: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .triangle-before:before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid blue; margin:0 5px; content:""; display:inline-block; } .triangle-before-left:before { border-left:none; border-right: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } 
 
Back Next

Approccio diverso. Con gradiente lineare (per IE, solo IE 10+). Puoi usare qualsiasi angolazione:

 .triangle { margin: 50px auto; width: 100px; height: 100px; /* linear gradient */ background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* W3C */; } 
 

Questa è una vecchia domanda, ma penso che ne valga la pena di condividere come creare una freccia usando questa tecnica triangular.

Passo 1:

Creiamo 2 triangoli, per il secondo useremo :after pseudo class e posizioniamolo appena sotto l’altro:

2 triangoli

 .arrow{ width: 0; height: 0; border-radius: 50px; display: inline-block; position: relative; } .arrow:after{ content: ""; width: 0; height: 0; position: absolute; } .arrow-up{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #333; } .arrow-up:after{ top: 5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ccc; right: -50px; } 
 

clip-path CSS

Questo è qualcosa che mi è sfuggito a questa domanda; clip-path

clip-path in poche parole

Il ritaglio, con la proprietà del clip-path , è simile al taglio di una forma (come un cerchio o un pentagono) da un pezzo di carta rettangular. La proprietà appartiene alla specifica ” CSS Masking Module Level 1 “. La specifica afferma, “Il mascheramento CSS fornisce due mezzi per hide parzialmente o completamente porzioni di elementi visivi: mascheramento e ritaglio”.

  • Estratto da Smashing Magazine

clip-path userà l’elemento stesso piuttosto che i suoi bordi per tagliare la forma specificata nei suoi parametri. Usa un sistema di coordinate basato su percentuali super-semplici che rende molto facile l’editing e significa che puoi prenderlo e creare forms strane e meravigliose in pochi minuti.


Esempio di forma triangular

 div { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: red; width: 100px; height: 100px; } 
 

OK, questo triangolo verrà creato a causa del modo in cui i bordi degli elementi lavorano insieme in HTML e CSS …

Poiché usiamo solitamente bordi da 1 o 2 pixel, non notiamo mai che i bordi creano angoli di 45 ° l’uno con la stessa larghezza e se la larghezza cambia, anche il grado dell’angolo viene modificato, eseguire il codice CSS che ho creato di seguito:

 .triangle { width: 100px; height: 100px; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; } 
 

Mixin triangolo SASS (SCSS)

Ho scritto questo per rendere più semplice (e ASCIUTTO) la generazione automatica di un triangolo CSS:

 // Triangle helper mixin (by Yair Even-Or) // @param {Direction} $direction - either `top`, `right`, `bottom` or `left` // @param {Color} $color [currentcolor] - Triangle color // @param {Length} $size [1em] - Triangle size @mixin triangle($direction, $color: currentcolor, $size: 1em) { $size: $size/2; $transparent: rgba($color, 0); $opposite: (top:bottom, right:left, left:right, bottom:top); content: ''; display: inline-block; width: 0; height: 0; border: $size solid $transparent; border-#{map-get($opposite, $direction)}-color: $color; margin-#{$direction}: -$size; } 

esempio del caso d’uso:

 span { @include triangle(bottom, red, 10px); } 

Pagina del parco giochi


Nota importante:
se il triangolo sembra pixelato in alcuni browser, prova uno dei metodi descritti qui .

Ho fatto un esempio in enjoycss

http://enjoycss.com/5p#border

puoi giocarci e vedere come cambia la cosa;)

inserisci la descrizione dell'immagine qui

ecco un altro violino:

 .container:after { position: absolute; right: 0; content: ""; margin-right:-50px; margin-bottom: -8px; border-width: 25px; border-style: solid; border-color: transparent transparent transparent #000; width: 0; height: 0; z-index: 10; -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; bottom: 21px; } .container { float: left; margin-top: 100px; position: relative; width: 150px; height: 80px; background-color: #000; } .containerRed { float: left; margin-top: 100px; position: relative; width: 100px; height: 80px; background-color: red; } 

https://jsfiddle.net/qdhvdb17/

Altri lo hanno già spiegato bene. Lascia che ti dia un’animazione che spieghi questo rapidamente: http://codepen.io/chriscoyier/pen/lotjh

Ecco un codice con cui puoi giocare e imparare i concetti.

HTML:

   

CSS:

 /*border-width is border thickness*/ #border-demo { background: gray; border-color: yellow blue red green;/*top right bottom left*/ border-style: solid; border-width: 25px 25px 25px 25px;/*top right bottom left*/ height: 50px; width: 50px; } 

Gioca con questo e guarda cosa succede. Imposta altezza e larghezza a zero. Quindi rimuovi il bordo superiore e rendi trasparente a sinistra e a destra, oppure guarda il codice qui sotto per creare un triangolo css:

 #border-demo { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 

Quasi tutte le risposte si concentrano sul triangolo creato usando il bordo, quindi ho intenzione di elaborare il metodo del gradiente lineare (come iniziato nella risposta di @lima_fil ).

Usare un valore di grado come 45 ° ci costringerà a rispettare un rapporto specifico di dimensioni per ottenere il triangolo che vogliamo e questo non sarà reattivo:

 .tri { width:100px; height:100px; background:linear-gradient(45deg, transparent 50%,red 0); /*To illustrate*/ border:1px solid; } 
 Good one 
bad one
bad one