Ci sono molte forme CSS diverse su CSS Tricks - Shapes of CSS e sono particolarmente perplesso con un triangolo:

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

<div id="triangle-up"></div>

Come e perché funziona?

Triangoli CSS: una tragedia in cinque atti

Come ha detto alex , bordi di uguale larghezza si incastrano l'uno contro l'altro ad angoli di 45 gradi:

Quando non hai il bordo superiore, è simile al seguente:

Quindi gli dai una larghezza di 0 ...

... e un'altezza di 0 ...

... e infine, rendi trasparenti i due bordi laterali:

Ciò si traduce in un triangolo.

I bordi utilizzano un bordo angolato nel punto in cui si intersecano (angolo di 45 ° con bordi di uguale larghezza, ma la modifica delle larghezze del bordo può inclinare l'angolo).

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

Dai un'occhiata al jsFiddle .

Nascondendo alcuni bordi, puoi ottenere l'effetto triangolo (come puoi vedere sopra rendendo le diverse porzioni di colori diversi). transparentviene spesso utilizzato come colore del bordo per ottenere la forma del triangolo.

Inizia con un quadrato e bordi di base. 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 :

Ma non è necessario il bordo superiore, quindi imposta la sua larghezza su 0px. Ora il nostro bordo inferiore 200pxrenderà 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 :

Quindi, per nascondere i due triangoli laterali, imposta il colore del bordo su trasparente. Poiché il bordo superiore è stato effettivamente eliminato, possiamo anche impostare il colore del bordo superiore su trasparente.

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

finalmente otteniamo questo :

Approccio diverso:

I triangoli CSS3 con trasformazione ruotano

La forma triangolare è abbastanza facile da realizzare usando questa tecnica. Per le persone che preferiscono vedere un'animazione che spiega come funziona questa tecnica è:

• Link all'ANIMAZIONE: come creare un triangolo CSS3 .
• E DEMO: i triangoli CSS3 realizzati con 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 passaggio 4 .
• Nota 2: nei seguenti frammenti, i prefissi del fornitore non sono inclusi. sono inclusi nelle demo di codepen .
• Nota 3: l'HTML per la seguente spiegazione è sempre: <div class="tr"></div>

PASSAGGIO 1: crea un div

Facile, assicurati di farlo width = 1.41 x height. Puoi usare qualsiasi tecnica ( vedi qui ) incluso l'uso delle percentuali e del fondo dell'imbottitura per mantenere le proporzioni e creare un triangolo reattivo . Nell'immagine seguente, il div ha un bordo giallo dorato.

In quel div, inserisci uno pseudo elemento e assegnagli il 100% di larghezza e altezza del genitore. Lo pseudo elemento ha uno sfondo blu nell'immagine seguente.

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;
}

PASSAGGIO 2: ruotiamo

Primo, il più importante: definire un'origine di trasformazione . L' origine predefinita è 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);

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);
}

PASSAGGIO 3: nascondilo

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

DEMO

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: vai oltre ...

Come mostrato nella demo , puoi personalizzare i triangoli:

1. Rendili più sottili o più piatti giocando skewX().
2. Falli puntare a sinistra, a destra o in qualsiasi altra direzione giocando con la direzione di trasformazione e rotazione.
3. Fai un po 'di riflessione con la proprietà di trasformazione 3D.
4. Dai i bordi del triangolo
5. Inserisci un'immagine all'interno del triangolo
6. Molto di più ... Scatena i poteri di CSS3 !

Perché usare questa tecnica?

1. Triangle può essere facilmente reattivo.
2. Puoi creare un triangolo con bordo .
3. Puoi mantenere i confini del triangolo. Ciò significa che puoi attivare lo stato hover o fare clic sull'evento solo quando il cursore si trova all'interno del triangolo . Questo può essere molto utile in alcune situazioni come questa in cui ogni triangolo non può sovrapporsi ai suoi vicini, quindi ogni triangolo ha il suo stato al passaggio del mouse.
4. Puoi creare effetti fantasiosi 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 pertanto non è possibile utilizzare questa tecnica se si prevede di supportare IE8. Vedi CanIuse per maggiori informazioni. Per alcuni effetti fantasiosi l'utilizzo di 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 semplice va bene per te, quindi dovresti andare per la tecnica del bordo spiegata qui: migliore compatibilità del browser e più facile da capire grazie ai messaggi amorevoli qui.

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

Vedi anche lo snippet di seguito.

Questa è una GIF animata fatta da uno screencast

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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Versione casuale

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

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'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#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: 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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Versione tutto in una volta

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

.border {
    margin: 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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Diciamo che abbiamo il seguente div:

<div id="triangle" />

Ora modifica il CSS passo dopo passo, così avrai un'idea chiara di ciò che sta accadendo in giro

PASSAGGIO 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:

PASSAGGIO 2: JSfiddle Link:

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

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 del div da 150 pixel a zero. L'immagine è allegata

PASSAGGIO 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 a parte il bordo inferiore. L'immagine è allegata di seguito.

PASSAGGIO 5: JSfiddle Link:

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

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 entità html:

▲

Risultato:

▲

Vedi: Quali sono le entità HTML per i triangoli su e giù?

Considera il triangolo in basso

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

Perché è venuto fuori in questa forma? Il diagramma seguente spiega le dimensioni, nota che 15px sono stati usati per il bordo inferiore e 10px sono stati usati per sinistra e destra.

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

Facendo un ulteriore passo avanti, usando CSS basato su questo ho aggiunto le frecce ai miei pulsanti indietro e successivo (sì, so che non è cross-browser al 100%, ma scivolo comunque).

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

}

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

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

Poiché di solito utilizziamo i bordi 1 o 2px, non notiamo mai che i bordi formano angoli di 45 ° l'uno con la stessa larghezza e se la larghezza cambia, anche il grado dell'angolo viene modificato, eseguiamo 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;
}

<div class="triangle">
</div>

Quindi, nel passaggio successivo, non abbiamo alcuna larghezza o altezza, qualcosa del genere:

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

<div class="triangle">
</div>

E ora rendiamo invisibili i bordi sinistro e destro per rendere il nostro triangolo desiderabile come di seguito:

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

<div class="triangle"></div>

Se non desideri eseguire lo snippet per visualizzare i passaggi, ho creato una sequenza di immagini per dare un'occhiata a tutti i passaggi in un'unica immagine:

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

.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 */;
}

<div class="triangle"></div>

Ecco jsfiddle

CSS clip-path

Questo è qualcosa che ritengo che questa domanda abbia mancato; clip-path

clip-path in poche parole

Il ritaglio, con la clip-pathproprietà, è simile al taglio di una forma (come un cerchio o un pentagono) da un pezzo di carta rettangolare. La proprietà appartiene alla specifica " CSS Masking Module Level 1 ". La specifica afferma che "il mascheramento CSS fornisce due mezzi per nascondere parzialmente o completamente parti di elementi visivi: mascheramento e ritaglio".

• Estratto da Smashing Magazine

clip-pathutilizzerà l'elemento stesso anziché i suoi bordi per tagliare la forma specificata nei suoi parametri. Utilizza un sistema di coordinate basato su percentuale super semplice che rende la modifica molto semplice e significa che puoi prenderlo e creare forme strane e meravigliose in pochi minuti.

Esempio di forma triangolare

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;
}

<div></div>

Svantaggio

Al momento ha un grande svantaggio, uno dei quali è la sua mancanza di supporto, essendo davvero coperto solo dai -webkit-browser e non avendo supporto su IE e solo molto parziale in FireFox.

risorse

Ecco alcune risorse e materiali utili per aiutarti a capire meglio clip-pathe anche iniziare a crearne uno tuo.

• Clippy - Un clip-pathgeneratore
• Il file di raccomandazione del candidato W3C
• clip-pathDocumentazione MDN
• clip-path Supporto per il browser

Questa è una vecchia domanda, ma penso che ne varrà la pena condividere come creare una freccia usando questa tecnica a triangolo.

Passo 1:

Consente di creare 2 triangoli, per il secondo utilizzeremo la :afterpseudo classe e la posizioneremo appena sotto l'altra:

.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;
    }

<div class="arrow arrow-up"> </div>

Passo 2

Ora non ci resta che impostare il colore del bordo predominante del secondo triangolo sullo stesso colore dello sfondo:

.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 #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

Violino con tutte le frecce:
http://jsfiddle.net/tomsarduy/r0zksgeu/

SASS (SCSS) triangolo mixin

Ho scritto questo per rendere più semplice (e SECCO) 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 di caso d'uso:

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

Pagina del parco giochi

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

^{Se vuoi applicare il bordo al triangolo leggi questo: Crea un triangolo con CSS?}

Quasi tutte le risposte si concentrano sul triangolo costruito usando il bordo, quindi ho intenzione di elaborare il linear-gradientmetodo (come iniziato nella risposta di @lima_fil ).

L'uso di un valore in gradi come 45°ci costringerà a rispettare un rapporto specifico height/widthal fine di ottenere il triangolo che vogliamo e questo non sarà reattivo:

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

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

Invece di farlo dovremmo considerare valori predefiniti di direzione come to bottom, to topecc. In questo caso possiamo ottenere qualsiasi tipo di forma triangolare mantenendola reattiva.

1) Triangolo rettangolare

Per ottenere tale triangolo dobbiamo lineare gradiente ed una direzione diagonale come to bottom right, to top left, to bottom left, ecc

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

2) triangolo isoscele

Per questo avremo bisogno di 2 gradienti lineari come sopra e ognuno prenderà metà della larghezza (o dell'altezza). È come se creassimo un'immagine speculare del primo triangolo.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

3) triangolo equilatero

Questo è un po 'complicato da gestire in quanto dobbiamo mantenere una relazione tra l'altezza e la larghezza del gradiente. Avremo lo stesso triangolo sopra ma renderemo il calcolo più complesso al fine di trasformare il triangolo isoscele in uno equilatero.

Per semplificare, considereremo che la larghezza del nostro div è nota e l'altezza è abbastanza grande da poter disegnare il nostro triangolo all'interno ( height >= width).

Abbiamo i nostri due gradienti g1e g2, la linea blu è la larghezza del div we ogni gradiente ne avrà il 50% ( w/2) e ogni lato del triangolo dovrebbe essere uguale a w. La linea verde è l'altezza di entrambi i gradienti hge possiamo facilmente ottenere la formula seguente:

(w/2)² + hg² = w²---> hg = (sqrt(3)/2) * w--->hg = 0.866 * w

Possiamo fare affidamento calc()per fare il nostro calcolo e per ottenere il risultato necessario:

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

Un altro modo è controllare l'altezza del div e mantenere facile la sintassi del gradiente:

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

4) Triangolo casuale

Per ottenere un triangolo casuale, è facile poiché dobbiamo semplicemente rimuovere la condizione del 50% di ciascuno, MA dovremmo mantenere due condizioni (entrambe dovrebbero avere la stessa altezza e la somma di entrambe le larghezze dovrebbe essere del 100%).

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<div class="tri-1"></div>

E se volessimo definire un valore per ciascuna parte? Dobbiamo semplicemente fare di nuovo il calcolo!

Definiamo hg1e hg2come l'altezza del nostro gradiente (entrambi sono uguali alla linea rossa) quindi wg1e wg2come la larghezza del nostro gradiente ( wg1 + wg2 = a). Non ho intenzione di dettagliare il calcolo, ma alla fine avremo:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

Ora abbiamo raggiunto il limite dei CSS poiché anche con calc()noi non saremo in grado di implementarlo, quindi dobbiamo semplicemente raccogliere manualmente il risultato finale e usarli come dimensioni fisse:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

indennità

Non dovremmo dimenticare che possiamo anche applicare la rotazione e / o l'inclinazione e abbiamo più opzioni per ottenere più triangoli:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

E ovviamente dovremmo tenere a mente la soluzione SVG che può essere più adatta in alcune situazioni:

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

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 spiegherà questo in fretta: http://codepen.io/chriscoyier/pen/lotjh

Ecco un po 'di codice con cui puoi giocare e apprendere i concetti.

HTML:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</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 rimuovere il bordo superiore e rendere trasparenti sinistra e destra, o semplicemente guardare 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;
}

Se si vuole giocare con border-size, widthe heighte vedere come questi possono creare forme diverse, provate questo:

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}

<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

Prova questo:-

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

<div class="triangle"></div>

So che questo è vecchio, ma vorrei aggiungere a questa discussione che ci sono almeno 5 metodi diversi per creare un triangolo usando solo HTML e CSS.

1. utilizzando borders
2. utilizzando linear-gradient
3. utilizzando conic-gradient
4. Utilizzando transformeoverflow
5. utilizzando clip-path

Penso che tutti siano stati trattati qui ad eccezione del metodo 3, usando il conic-gradient, quindi lo condividerò qui:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>