triangle - Come funzionano i triangoli CSS?




css triangle generator (12)

Ci sono un sacco di diverse forme CSS 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?


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:

Quando non hai un bordo superiore, sembra che questo:

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.


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


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:

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

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 */;
}
<div class="triangle"></div>

Ecco jsfiddle


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:

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.

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


Diciamo che abbiamo la seguente div:

<div id="triangle" />

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:

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.

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

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.

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.

Quindi abbiamo ottenuto il triangolo di cui avevamo bisogno.


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

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>

Tutto in una volta versione

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


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;

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


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à this :

this

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

this

Quindi per nascondere 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 this :

this


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

Usare un valore di grado come 45° ci costringerà a rispettare un rapporto specifico di height/width 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
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

Invece di fare questo dovremmo considerare i valori predefiniti di direzione come to bottom , to top , ecc. In questo caso possiamo ottenere qualsiasi tipo di forma triangolare mentre la manteniamo reattiva.

1) Triangolo rettangolo

Per ottenere tale triangolo abbiamo bisogno di un gradiente lineare e 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.8%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.8%,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 creiamo un'immagine speculare del primo triangolo.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.8%,red 50%),
  linear-gradient(to bottom left, transparent 49.8%,red 50%);
  background-size:50.5% 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 'difficile da gestire in quanto abbiamo bisogno di mantenere una relazione tra l'altezza e la larghezza del gradiente. Avremo lo stesso triangolo come 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 essere in grado di disegnare il nostro triangolo all'interno ( height >= width ).

Abbiamo i nostri due gradienti g1 e g2 , la linea blu è la larghezza del div w e ogni gradiente ne avrà il 50% ( w/2 ) e ciascun lato del triangolo sarà uguale a w . La linea verde è l'altezza di entrambe le sfumature hg e possiamo facilmente ottenere la seguente formula:

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

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

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.8%,red 50%),
  linear-gradient(to bottom left, transparent 49.8%,red 50%);
  background-size:calc(var(--w)/2 + 0.5%)  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 di div e mantenere la sintassi del gradiente facile:

.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 in quanto abbiamo semplicemente bisogno di rimuovere la condizione del 50% di ciascuna, ma dovremmo mantenere due condizioni (entrambe dovrebbero avere la stessa altezza e la somma di entrambe le larghezze dovrebbe essere 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>

Ma cosa succede se vogliamo definire un valore per ciascuna parte? Abbiamo semplicemente bisogno di fare di nuovo il calcolo!

Definiamo hg1 e hg2 come l'altezza del nostro gradiente (entrambi sono uguali alla linea rossa) quindi wg1 e wg2 come 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 di CSS come anche con calc() non saremo in grado di implementarlo, quindi abbiamo semplicemente bisogno di raccogliere manualmente il risultato finale e usarlo come dimensione fissa:

.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 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  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 dobbiamo dimenticare che possiamo anche applicare la rotazione e / o l'inclinazione e abbiamo più possibilità di ottenere più triangoli:

.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 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  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/


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;
}
<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 creare 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 vedere i passaggi, ho creato una sequenza di immagini per dare un'occhiata a tutti i passaggi di un'immagine:





css-shapes