web-dev-qa-db-fra.com

Comment fonctionnent les triangles CSS?

Il y a plein de formes CSS différentes en astuces CSS - 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?

csscss3geometrypolygoncss-shapes
1771
Stanislav Shabalin

CSS Triangles: Une tragédie en cinq actes

Comme alex dit , des frontières d'égale largeur se rencontrent à 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 bordures transparentes:

transparent side borders

Cela donne un triangle.

2184
sdleihssirhc

Les bordures utilisent un bord angulaire où elles se croisent (un angle de 45 ° avec des bordures de même largeur, mais changer la largeur des bords peut fausser l’angle).

Border example

jsFiddle .

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

502
alex

Commencez par un carré de base et des bordures. Chaque bordure aura une couleur différente afin que nous puissions les distinguer:

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

ce qui vous donne this :

square with four borders

Mais la bordure supérieure n'est pas nécessaire, définissez donc sa largeur sur 0px. Maintenant, notre bas-frontière de 200px fera en sorte que notre triangle mesure 200 pixels de haut.

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

et nous aurons this :

bottom half of square with four borders

Ensuite, pour masquer les deux triangles latéraux, définissez la couleur de la bordure sur transparent. Comme la bordure supérieure a été supprimée, nous pouvons également définir la couleur de bordure supérieure.

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

enfin nous obtenons this :

triangular bottom border

464
Mouna Cheikhna

Une approche différente:

triangles CSS3 avec transformation en rotation

La forme triangulaire est assez facile à utiliser avec cette technique. Pour les personnes qui préfèrent voir une animation expliquant le fonctionnement de cette technique, voici:

gif animation : how to make a triangle with transform rotate

Autrement, voici 4 explications détaillées (ce n'est pas une tragédie) de la réalisation d'un triangle rectangle isocèle avec un seul élément.

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

ÉTAPE 1: Faites une div

Facile, assurez-vous simplement que width = 1.41 x height. Vous pouvez utiliser n’importe quel techinque ( voir ici ), y compris l’utilisation de pourcentages et de marges (padding-bottom) pour conserver les proportions et créer un triangle sensible . Dans l'image suivante, la div a une bordure jaune d'or.

Dans cette division, insérez un pseudo-élément et donnez-lui 100% de la largeur et de la hauteur du parent. Le pseudo-élément a un arrière-plan bleu dans l'image suivante.

Making a CSS triangle with transform roate step 1

À ce stade, nous avons ceci 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: Faisons une rotation

Premièrement, le plus important: définit 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 ceci 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 indésirables du pseudo-élément (tout ce qui dépasse du div avec la bordure jaune), il vous suffit de définir overflow:hidden; sur le conteneur. après avoir supprimé la bordure jaune, vous obtenez ... un TRIANGLE! :

DÉMO

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: aller plus loin ...

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

  1. Rendez-les plus minces ou plus plats en jouant avec skewX().
  2. Faites-les pointer à gauche, à droite ou dans une autre direction en jouant avec le sens de transformation ou de rotation.
  3. Make n peu de réflexion avec la propriété de transformation 3D.
  4. Donne le bordures de triangle
  5. Mettez une image dans le triangle
  6. Beaucoup plus ... Libérez les pouvoirs de CSS!

Pourquoi utiliser cette technique?

  1. Le 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 de survol ou l'événement de clic uniquement lorsque le curseur est à l'intérieur du triangle. Cela peut devenir très pratique dans certaines situations comme celui-ci où chaque triangle ne peut pas superposer ses voisins, donc chaque triangle a son propre état de survol.
  4. Vous pouvez en faire des 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 la 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 CanIuse pour plus d'informations. Pour certains effets de fantaisie utilisant des transformations 3d telles que la réflexion , le support du navigateur est IE10 + (voir canIuse pour plus d'informations).
  2. Vous n'avez besoin de rien de réactif et un triangle simple vous convient, alors vous devriez utiliser la technique de bordure expliquée ici: une meilleure compatibilité avec les navigateurs et plus facile à comprendre grâce aux posts captivants ici.
248
web-tiki

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

Voir également l'extrait ci-dessous.

Ceci est un fichier GIF animé créé à 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 tout à 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>
178
yunzen

Disons que nous avons le div suivant:

<div id="triangle" />

Maintenant, éditez le CSS pas à pas, vous aurez ainsi une idée précise de ce qui se passe autour de vous.

É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 simple div. Avec un CSS très simple. Ainsi, un profane peut comprendre. Div a des dimensions de 150 x 150 pixels avec une bordure de 50 pixels. L'image est attachée:

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 bordure des 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

Nous avons donc obtenu le triangle dont nous avions besoin.

47
Rai Ammad Khan

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

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

&#9650;

Résultat:

▲

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

38
user133408

Considérons le triangle ci-dessous

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

Voici ce qui nous est donné:

Small triangle output

Pourquoi est-il sorti sous cette forme? Le diagramme ci-dessous explique les dimensions. Notez que 15px était utilisé pour la bordure inférieure et 10px pour les côtés gauche et droit.

Large triangle

Il est assez facile de créer un triangle rectangle également en supprimant le bord droit.

Right angle triangle

31
Daniel Imms

En poussant un peu plus loin, en utilisant css, j'ai ajouté des flèches à mon dos et aux boutons suivants (oui, je sais que ce n'est pas 100% cross-browser, mais néanmoins élégant).

.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>
29
PseudoNinja

OK, ce triangle sera créé à cause de la manière dont les bordures des éléments fonctionnent ensemble en HTML et CSS ...

Comme nous utilisons habituellement des bordures de 1 ou 2 pixels, nous ne remarquons jamais que les bordures se forment des angles à 45 ° de même largeur et si la largeur change, le degré d'angle se modifie également, lancez le code CSS que j'ai créé ci-dessous:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Ensuite, à l'étape suivante, nous n'avons pas de largeur ni de hauteur, quelque chose comme ceci:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Et maintenant, nous rendons les frontières gauche et droite invisibles pour rendre notre triangle souhaitable comme ci-dessous:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div class="triangle"></div>

Si vous ne souhaitez pas exécuter l'extrait de code pour afficher les étapes, j'ai créé une séquence d'images afin d'examiner toutes les étapes d'une image:

enter image description here

18
Alireza

Une approche différente. Avec dégradé linéaire (pour IE, uniquement IE 10+). Vous pouvez utiliser n'importe quel angle:

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

Voici jsfiddle

18
lima_fil

CSS clip-path

C'est quelque chose que je pense que cette question a manqué; clip-path

clip-path en un mot

Le découpage, avec la propriété clip-path, revient à couper une forme (comme un cercle ou un pentagone) dans un morceau de papier rectangulaire. La propriété appartient à la spécification “ Module de masquage CSS niveau 1 ”. Selon les spécifications, "le masquage CSS fournit deux moyens de masquer partiellement ou totalement des parties d'éléments visuels: le masquage et le découpage".

clip-path utilisera l'élément lui-même plutôt que ses bordures pour couper la forme que vous spécifiez dans ses paramètres. Il utilise un système de coordonnées basé sur un pourcentage super simple, ce qui rend l’édition très facile et vous permet de le saisir et de créer des formes étranges et magnifiques en quelques minutes.

Exemple de forme de triangle

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>

Inconvénient

Il y a un inconvénient majeur pour le moment, l'un d'entre eux étant son manque majeur de support, uniquement couvert par les navigateurs -webkit- et n'ayant aucun support sur IE et très partiel sous FireFox.

Ressources

Voici quelques ressources et documents utiles pour mieux comprendre clip-path et commencer à créer le vôtre.

12
Stewartside

C'est une vieille question, mais je pense que cela vaudra la peine de partager comment créer une flèche en utilisant cette technique de triangle.

Étape 1:

Créons 2 triangles, pour le second nous utiliserons la pseudo classe :after et nous la positionnerons juste en dessous de l’autre:

2 triangles

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

Étape 2

Il ne reste plus qu’à définir la couleur de bordure prédominante du deuxième triangle sur la même couleur d’arrière-plan:

enter image description here

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

Violon avec toutes les flèches:
http://jsfiddle.net/tomsarduy/r0zksgeu/

11
Tom Sarduy

triangle mixin SASS (SCSS)

J'ai écrit ceci pour faciliter (et DRY) la génération automatique d'un triangle 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;
}

exemple de cas d'utilisation:

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

page du terrain de je

Remarque importante:
si le triangle semble pixélisé dans certains navigateurs, essayez l’une des méthodes décrites ici .

9
vsync

Si vous souhaitez appliquer une bordure au triangle, lisez ceci: Créer un triangle avec CSS?

Presque toutes les réponses se concentrent sur le triangle construit en utilisant une bordure, je vais donc élaborer la méthode linear-gradient (comme indiqué dans la réponse de @ lima_fil ).

Utiliser une valeur de degré telle que 45° nous obligera à respecter un rapport spécifique de height/width afin d'obtenir le triangle que nous voulons et cela ne répondra pas:

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

Au lieu de cela, nous devrions considérer des valeurs de direction prédéfinies telles que to bottom, to top, etc. Dans ce cas, nous pouvons obtenir n'importe quel type de triangle tout en le maintenant réactif.

1) Triangle rectangle

Pour obtenir un tel triangle, nous avons besoin d'un gradient linéaire et d'une direction diagonale, comme to bottom right, to top left, to bottom left, etc.

.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) triangle isocèle

Pour celui-ci nous aurons besoin de 2 linéaires-dégradés comme ci-dessus et chacun prendra la moitié de la largeur (ou la hauteur). C'est comme si on créait une image miroir du premier triangle.

.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) triangle équilatéral

Celui-ci est un peu délicat à gérer car nous devons garder une relation entre la hauteur et la largeur du dégradé. Nous aurons le même triangle que ci-dessus mais nous complexifierons le calcul afin de transformer le triangle isocèle en triangle équilatéral.

Pour simplifier les choses, nous considérerons que la largeur de notre div est connue et que la hauteur est suffisamment grande pour pouvoir tracer notre triangle à l'intérieur (height >= width).

CSS triangle with gradient

Nous avons nos deux gradients g1 et g2, la ligne bleue est la largeur de la divw et chaque dégradé en aura 50% (w/2 ) et chaque côté du triangle doit être égal à w. La ligne verte est la hauteur du gradient hg et nous pouvons facilement obtenir la formule ci-dessous:

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

Nous pouvons nous appuyer sur calc() pour effectuer notre calcul et obtenir le résultat souhaité:

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

Une autre méthode consiste à contrôler la hauteur de div et à conserver la syntaxe de gradient simple:

.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) Triangle aléatoire

Pour obtenir un triangle aléatoire, rien de plus simple, il suffit simplement de supprimer la condition de 50% de chaque, MAIS il convient de conserver deux conditions (les deux doivent avoir la même hauteur et la somme des deux largeurs doit être de 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>

Mais que se passe-t-il si nous voulons définir une valeur pour chaque côté? Nous devons simplement refaire les calculs!

CSS triangle with gradient

Définissons hg1 et hg2 comme hauteur de notre dégradé (les deux sont égaux à la ligne rouge) puis wg1 et wg2 comme largeur de notre dégradé (wg1 + wg2 = a). Je ne vais pas détailler le calcul mais à la fin nous aurons:

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

Maintenant que nous avons atteint la limite de CSS, même avec calc(), nous ne pourrons pas l'implémenter. Nous devons simplement rassembler le résultat final manuellement et les utiliser à taille fixe:

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

Bonus

Nous ne devons pas oublier que nous pouvons aussi appliquer une rotation et/ou une inclinaison et que nous avons plus d’option pour obtenir plus de triangle:

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

Et bien sûr, nous devrions garder à l’esprit la solution SVG qui peut être plus appropriée dans certaines situations:

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>
8
Temani Afif

D'autres l'ont déjà bien expliqué. Laissez-moi vous donner une animation qui vous expliquera rapidement: http://codepen.io/chriscoyier/pen/lotjh

Voici du code avec lequel vous pourrez jouer et apprendre les concepts.

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

Jouez avec cela et voyez ce qui se passe. Définissez la hauteur et la largeur à zéro. Supprimez ensuite la bordure supérieure et rendez transparent à gauche et à droite, ou regardez simplement le code ci-dessous pour créer un triangle CSS:

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

voici un autre violon:

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

4
Doml The-Bread