Domanda Come funzionano i triangoli CSS?


Ci sono un sacco di diverse forme CSS oltre a Trucchi CSS - Forme di CSS e sono particolarmente perplesso con un triangolo:

CSS Triangle

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


1633
2017-08-16 03:54


origine


risposte:


CSS Triangles: A Tragedy in Five Acts

Come ha detto alex, bordi di uguale ampiezza si accavallano l'un l'altro a 45 gradi:

borders meet at 45 degree angles, content in middle

Quando non hai un bordo superiore, sembra che questo:

no top border

Quindi gli dai una larghezza di 0 ...

no width

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

no height either

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

transparent side borders

Ciò si traduce in un triangolo.


2054
2017-08-16 04:11



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

Border example

jsFiddle.

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


485
2017-08-16 03:58



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:

square with four borders

Ma non è necessario il bordo superiore, quindi impostarne la larghezza 0px. Ora il nostro limite 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:

bottom half of square with four borders

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 arriviamo Questo:

triangular bottom border


436
2017-08-17 11:16



Approccio diverso:

Triangoli CSS3 con la trasformazione ruota

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

gif animation : how to make a triangle with transform rotate

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 nel demo di codepen.
  • Nota 3: l'HTML per la seguente spiegazione è sempre:  <div class="tr"></div>

PASSO 1 : Crea un div

Facile, assicurati width = 1.41 x height. Puoi usare qualsiasi tecnica (Vedere qui) compreso l'uso di percentuali e imbottitura in basso per mantenere le proporzioni e fare a triangolo reattivo. Nell'immagine seguente, il div ha un bordo giallo dorato.

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

Making a CSS triangle with transform roate step 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 : Giriamo

Primo, il più importante: definire un'origine di trasformazione. Il origine di default è al centro dell'elemento pseudo 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);

Creating a triangle with CSS3 step 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 nascondere le parti indesiderate dello pseudo elemento (tutto ciò che trabocca il div con il bordo giallo) devi solo impostare overflow:hidden; sul contenitore. dopo aver rimosso il bordo giallo, ottieni ... a TRIANGOLO! :

DEMO

CSS triangle

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 in dimostrazione, puoi personalizzare i triangoli:

  1. Rendili più magri 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. Rendere qualche riflessione con proprietà di trasformazione 3D.
  4. Dai il bordi del triangolo
  5. Metti un'immagine all'interno del triangolo
  6. Molto di più ... Scatena i poteri di CSS3!

Perché usare questa tecnica?

  1. Il triangolo può essere facilmente reattivo.
  2. Puoi fare un triangolo con bordo.
  3. Puoi mantenere i confini del triangolo. Ciò significa che è possibile attivare lo stato di hover o fare clic sull'evento solo quando il cursore è all'interno del triangolo. Questo può diventare molto utile in alcune situazioni come questo dove ciascun triangolo non può sovrapporsi ai suoi vicini in modo tale che ogni triangolo abbia il proprio stato di hover.
  4. Puoi fare un po ' effetti di fantasia come i riflessi.
  5. Ti aiuterà a capire le proprietà di trasformazione 2d e 3d.

Perché non usare questa tecnica?

  1. Lo svantaggio principale è il compatibilità del browser, le proprietà di trasformazione 2d sono supportate da IE9 + e quindi non è possibile utilizzare questa tecnica se si intende supportare IE8. Vedere Posso usare per maggiori informazioni. Per alcuni effetti di fantasia usando trasformazioni 3d come il riflesso il supporto del browser è IE10 + (vedi posso usare 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.

214
2017-07-17 16:30



Ecco un animazione in JSFiddle Ho creato per la dimostrazione.

Vedi anche lo snippet qui sotto.

Questa è una GIF animata composta da uno Screencast

Animated Gif of Triangle

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>


156
2017-11-29 11:21



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: Link JSfiddle:

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

enter image description here

PASSO 2:  Link 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.

enter image description here

FASE: 3  Link JSfiddle:

#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

enter image description here

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.

enter image description here

PASSO 5:  Link 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.

enter image description here

Quindi abbiamo ottenuto il triangolo di cui avevamo bisogno.


39
2018-06-17 06:09



E ora qualcosa di completamente diverso ...

Invece di usare i trucchi css, non dimenticare le soluzioni semplici come le entità html:

&#9650;

Risultato:

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


35
2017-12-01 12:40



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:

Small triangle output

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.

Large triangle

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

Right angle triangle


29
2018-03-21 11:20



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>


27
2017-12-30 16:56