Question Comment fonctionnent les triangles CSS?


Il y a beaucoup de formes CSS différentes à CSS Tricks - Formes de CSS et je suis particulièrement intrigué par un triangle:

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>

Comment et pourquoi ça marche?


1633
2017-08-16 03:54


origine


Réponses:


CSS Triangles: une tragédie en cinq actes

Comme Alex a dit, les bordures de même largeur se collent les unes contre les autres à des angles de 45 degrés:

borders meet at 45 degree angles, content in middle

Lorsque vous n'avez pas de bordure supérieure, cela ressemble à ceci:

no top border

Ensuite, vous lui donnez une largeur de 0 ...

no width

... et une hauteur de 0 ...

no height either

... et enfin, vous rendez les deux bords latéraux transparents:

transparent side borders

Cela résulte en un triangle.


2054
2017-08-16 04:11



Les bordures utilisent un bord incliné où elles se croisent (angle de 45 ° avec des bordures de largeur égale, mais la modification des largeurs de bordure peut fausser l'angle).

Border example

jsFiddle.

En masquant certaines bordures, vous pouvez obtenir l'effet triangle (comme vous pouvez le voir ci-dessus en rendant les différentes parties différentes couleurs). transparent est souvent utilisé comme une couleur de bord pour atteindre la forme du triangle.


484
2017-08-16 03:58



Commencez avec un carré de base et des frontières. Chaque bordure aura une couleur différente afin que nous puissions les différencier:

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

ce qui vous donne ce:

square with four borders

Mais il n'y a pas besoin de la bordure supérieure, alors définissez sa largeur à 0px. Maintenant, notre frontière-bas de 200px rendra notre triangle 200px grand.

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

et nous aurons ce:

bottom half of square with four borders

Ensuite, pour masquer les deux triangles latéraux, définissez la couleur de la bordure sur transparent. Étant donné que la bordure supérieure a été effacée, nous pouvons également définir la couleur border-top en transparence.

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

finalement nous obtenons ce:

triangular bottom border


436
2017-08-17 11:16



Une approche différente:

CSS3 triangles avec transformation tourner

La forme triangulaire est assez facile à faire en utilisant cette technique. Pour les personnes qui préfèrent voir une animation expliquant comment cette technique fonctionne ici, c'est:

gif animation : how to make a triangle with transform rotate

Sinon, voici une explication détaillée en 4 actes (ce n'est pas une tragédie) de la façon de faire un triangle rectangle isocèle avec un élément.

  • Note 1: pour les triangles non isocèles et les trucs fantaisie, vous pouvez voir l'étape 4.
  • Remarque 2: dans les extraits suivants, les préfixes du fournisseur ne sont pas inclus. ils sont inclus dans le démos de codepen.
  • Note 3: le HTML pour l'explication suivante est toujours:  <div class="tr"></div>

ÉTAPE 1 : Faire une div

Facile, assurez-vous simplement que width = 1.41 x height. Vous pouvez utiliser n'importe quelle techinque (vois ici) y compris l'utilisation de pourcentages et de rembourrage-fond pour maintenir le rapport d'aspect et faire un triangle réactif. Dans l'image suivante, le div a une bordure jaune d'or.

Dans ce div, insérez un pseudo élément et donnez-lui 100% de largeur et de hauteur de parent. L'élément pseudo a un arrière-plan bleu dans l'image suivante.

Making a CSS triangle with transform roate step 1

À ce stade, nous avons cette 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;
}

ÉTAPE 2 : Tournons

D'abord, le plus important: définir une origine de transformation. le origine par défaut est au centre du pseudo élément et nous en avons besoin en bas à gauche. En ajoutant ceci CSS au pseudo-élément:

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

Maintenant, nous pouvons faire pivoter le pseudo élément de 45 degrés dans le sens des aiguilles d'une montre avec transform : rotate(45deg);

Creating a triangle with CSS3 step 2

À ce stade, nous avons cette 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);
}

ÉTAPE 3: cachez-le

Pour masquer les parties non désirées du pseudo élément (tout ce qui déborde le div avec la bordure jaune), il vous suffit de définir overflow:hidden; sur le conteneur. après avoir enlevé la bordure jaune, vous obtenez ... un TRIANGLE! :

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

ÉTAPE 4: allez plus loin ...

Comme indiqué dans le démo, vous pouvez personnaliser les triangles:

  1. Faites les amincir ou flatter en jouant avec skewX().
  2. Faites-les pointer vers la gauche, la droite ou dans toute autre direction en jouant avec la direction de la transformation et la direction de rotation.
  3. Faire une certaine réflexion avec la propriété de transformation 3D.
  4. Donner la frontières de triangle
  5. Mettre une image à l'intérieur du triangle
  6. Beaucoup plus ... Libérez les pouvoirs de CSS3!

Pourquoi utiliser cette technique?

  1. Triangle peut facilement être réactif.
  2. Vous pouvez faire un triangle avec bordure.
  3. Vous pouvez maintenir les limites du triangle. Cela signifie que vous pouvez déclencher l'état hover ou l'événement click uniquement lorsque le curseur est à l'intérieur du triangle. Cela peut devenir très pratique dans certaines situations comme celui-là où chaque triangle ne peut pas superposer ses voisins, donc chaque triangle a son propre état hover.
  4. Vous pouvez en faire effets de fantaisie comme des reflets.
  5. Cela vous aidera à comprendre les propriétés de transformation 2D et 3D.

Pourquoi ne pas utiliser cette technique?

  1. Le principal inconvénient est le compatibilité du navigateur, les propriétés de transformation 2d sont prises en charge par IE9 + et vous ne pouvez donc pas utiliser cette technique si vous envisagez de prendre en charge IE8. Voir Puis-je utiliser pour plus d'informations. Pour certains effets de fantaisie en utilisant des transformations 3D comme la réflexion le support du navigateur est IE10 + (voir puis-je utiliser pour plus d'informations).
  2. Vous n'avez besoin de rien de sensible et un simple triangle est parfait pour vous, alors vous devriez opter pour la technique de bordure expliquée ici: meilleure compatibilité avec les navigateurs et plus facile à comprendre grâce aux meilleurs messages ici.

214
2017-07-17 16:30



Voici un animation dans JSFiddle J'ai créé pour la démonstration.

Voir aussi l'extrait ci-dessous.

Ceci est un GIF animé à partir d'un 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>


Version aléatoire

/**
 * 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>


Version à la fois

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



Disons que nous avons le div suivant:

<div id="triangle" />

Maintenant, éditez le CSS étape par étape, de sorte que vous aurez une idée claire de ce qui se passe autour

ÉTAPE 1: Lien 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;
    }

Ceci est une div simple. Avec un CSS très simple. Donc, un profane peut comprendre. Div a des dimensions de 150 x 150 pixels avec la bordure de 50 pixels. L'image est jointe:

enter image description here

ÉTAPE 2:  Lien 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;
}

Maintenant, je viens de changer la couleur de la bordure de tous les 4 côtés. L'image est attachée.

enter image description here

ÉTAPE 3  Lien 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;
}

Maintenant, je viens de changer la hauteur et la largeur de div de 150 pixels à zéro. L'image est attachée

enter image description here

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

Maintenant j'ai rendu toutes les frontières transparentes à l'exception de la bordure inférieure. L'image est attachée ci-dessous.

enter image description here

ÉTAPE 5:  Lien 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;
}

Maintenant, je viens de changer la couleur de fond en blanc. L'image est attachée.

enter image description here

D'où nous avons eu le triangle dont nous avions besoin.


39
2018-06-17 06:09



Et maintenant quelque chose de complètement différent ...

Au lieu d'utiliser les astuces css, n'oubliez pas les solutions aussi simples que les entités html:

&#9650;

Résultat:

Voir: Quelles sont les entités HTML pour les triangles haut et bas?


35
2017-12-01 12:40