Il existe de nombreuses formes CSS différentes sur CSS Tricks - Shapes of CSS et je suis particulièrement perplexe avec un 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?

CSS Triangles: une tragédie en cinq actes

Comme l'a dit Alex , des bordures de largeur égale se touchent les unes contre les autres à des angles de 45 degrés:

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

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

... et une hauteur de 0 ...

... et enfin, vous rendez les deux bordures latérales transparentes:

Cela se traduit par un triangle.

Les bordures utilisent un bord angulaire où elles se croisent (angle de 45 ° avec des bordures de largeur égale, mais le changement des largeurs de bordure peut biaiser l'angle).

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

<div></div>

Jetez un œil au jsFiddle .

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

Commencez avec un carré et des bordures de base. Chaque bordure recevra 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 ceci :

Mais il n'y a pas besoin de bordure supérieure, alors définissez sa largeur sur 0px. Maintenant, notre bordure inférieure 200pxfera notre triangle de 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 obtiendrons ceci :

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é supprimée, nous pouvons également définir la couleur de la bordure supérieure sur transparente.

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

enfin, nous obtenons ceci :

Une approche différente:

Triangles CSS3 avec rotation de transformation

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

• Lien vers l' ANIMATION: comment faire un triangle CSS3 .
• Et DEMO: les triangles CSS3 fabriqués avec la transformation tournent.

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.

• Remarque 1: pour les triangles non isocèles et les objets de fantaisie, vous pouvez voir l'étape 4 .
• Remarque 2: dans les extraits de code suivants, les préfixes du fournisseur ne sont pas inclus. ils sont inclus dans les démos de codepen .
• Note 3: le HTML de 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 quelle technologie ( voir ici ), y compris l'utilisation de pourcentages et de rembourrage pour maintenir le rapport d'aspect et créer un triangle réactif . Dans l'image suivante, le div a une bordure jaune doré.

Dans cette div, insérez un pseudo-élément et donnez-lui 100% de largeur et de hauteur de parent. Le pseudo-élément a un fond bleu dans l'image suivante.

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

Tout d'abord, le plus important: définir une origine de transformation . L' origine par défaut est au centre du pseudo-élément et nous en avons besoin en bas à gauche. En ajoutant ce 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);

À ce stade, nous avons ce 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é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:

.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 la démo , vous pouvez personnaliser les triangles:

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

Pourquoi utiliser cette technique?

1. Le triangle peut facilement être réactif.
2. Vous pouvez faire un triangle avec bordure .
3. Vous pouvez conserver les limites du triangle. Cela signifie que vous pouvez déclencher l'état de survol ou cliquer sur l'événement uniquement lorsque le curseur se trouve à l'intérieur du triangle . Cela peut devenir très pratique dans certaines situations comme celle-ci où chaque triangle ne peut pas superposer ses voisins, donc chaque triangle a son propre état de survol.
4. Vous pouvez créer des effets fantaisistes comme des reflets .
5. Il 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 prévoyez de prendre en charge IE8. Voir CanIuse pour plus d'informations. Pour certains effets fantaisistes utilisant des transformations 3D comme le support du navigateur de réflexion 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 opter pour la technique de bordure expliquée ici: meilleure compatibilité du navigateur et plus facile à comprendre grâce aux messages amaizing ici.

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

Voir également l'extrait ci-dessous.

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

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>

Disons que nous avons le div suivant:

<div id="triangle" />

Maintenant, éditez le CSS étape par étape, ainsi 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 simple div. Avec un CSS très simple. Un profane peut donc comprendre. Div a des dimensions de 150 x 150 pixels avec une bordure de 50 pixels. L'image est jointe:

É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 des 4 côtés. L'image est jointe.

É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 jointe

É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 bordures transparentes à l'exception de la bordure inférieure. L'image est jointe ci-dessous.

É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 d'arrière-plan en blanc. L'image est jointe.

Nous avons donc obtenu le triangle dont nous avions besoin.

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

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

▲

Résultat:

▲

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

Considérez 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 que l'on nous donne:

Pourquoi est-il sorti sous cette forme? Le diagramme ci-dessous explique les dimensions, notez que 15px a été utilisé pour la bordure inférieure et 10px a été utilisé pour la gauche et la droite.

Il est assez facile de faire un triangle à angle droit également en supprimant la bordure droite.

Pour aller plus loin, en utilisant CSS basé sur cela, j'ai ajouté des flèches à mes boutons précédent et suivant (oui, je sais que ce n'est pas 100% cross-browser, mais néanmoins lisse).

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

D'ACCORD, ce triangle sera créé à cause de la façon dont les bordures des éléments fonctionnent ensemble en HTML et CSS ...

Comme nous utilisons généralement des bordures de 1 ou 2 pixels, nous ne remarquons jamais que les bordures font un angle de 45 ° les unes avec les autres avec la même largeur et si la largeur change, le degré d'angle est également modifié, exécutez 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 ni largeur ni 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 bordures 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 voir les étapes, j'ai créé une séquence d'images pour examiner toutes les étapes d'une image:

Une approche différente. Avec gradient 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

CSS clip-path

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

clip-path en un mot

Le détourage, avec la clip-pathpropriété, s'apparente à la découpe d'une forme (comme un cercle ou un pentagone) à partir d'un morceau de papier rectangulaire. La propriété appartient à la spécification « CSS Masking Module Level 1 ». La spécification stipule que «le masquage CSS fournit deux moyens pour masquer partiellement ou totalement des parties d'éléments visuels: le masquage et l'écrêtage».

• Extrait de Smashing Magazine

clip-pathutilisera 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 qui rend l'édition très facile et signifie que vous pouvez le ramasser et créer des formes étranges et merveilleuses 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 a un inconvénient majeur pour le moment, l'un étant son manque de support majeur, n'étant vraiment couvert que par les -webkit-navigateurs et n'ayant aucun support sur IE et seulement très partiel dans FireFox.

Ressources

Voici quelques ressources et documents utiles pour mieux comprendre clip-pathet commencer à créer les vôtres.

• Clippy - Un clip-pathgénérateur
• Le dossier de recommandation des candidats du W3C
• clip-pathDocumentation MDN
• clip-path Prise en charge du navigateur

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:

Permet de créer 2 triangles, pour le second nous allons utiliser la :afterpseudo classe et la positionner juste en dessous de l'autre:

.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

Maintenant, il suffit de définir la couleur de bordure prédominante du deuxième triangle sur la même couleur de l'arrière-plan:

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

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

Mixage triangle SASS (SCSS)

J'ai écrit ceci pour faciliter (et sécher) 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 aire de jeux

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

^{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 à l'aide de la bordure, je vais donc élaborer la linear-gradientméthode (comme commencé dans la réponse de @lima_fil ).

L'utilisation d'une valeur de degré comme 45°nous obligera à respecter un rapport spécifique de height/widthafin d'obtenir le triangle que nous voulons et cela ne sera pas réactif:

.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 faire cela , il faut tenir compte des valeurs prédéfinies de direction comme to bottom, to top, etc. Dans ce cas , nous pouvons obtenir toute sorte de forme triangulaire tout en gardant réactif.

1) Triangle rectangle

Pour obtenir un tel triangle nous avons besoin d' un gradient linéaire et 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 gradients linéaires comme ci-dessus et chacun prendra la moitié de la largeur (ou de la hauteur). C'est comme si nous créons 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 rendrons le calcul plus complexe afin de transformer le triangle isocèle en triangle équilatéral.

Pour vous faciliter la tâche, nous considérerons que la largeur de notre div est connue et que la hauteur est suffisamment grande pour pouvoir dessiner notre triangle à l'intérieur ( height >= width).

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

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

Nous pouvons compter calc()pour faire notre calcul et obtenir le résultat recherché:

.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 façon est de contrôler la hauteur de div et de garder la syntaxe de gradient 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) Triangle aléatoire

Pour obtenir un triangle aléatoire, c'est facile car nous devons simplement supprimer la condition de 50% de chacun MAIS nous devons garder 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 le calcul!

Définissons hg1et hg2comme la hauteur de notre gradient (les deux sont égaux à la ligne rouge) puis wg1et wg2comme la largeur de notre gradient ( 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, nous avons atteint la limite de CSS car même avec calc()nous ne serons pas en mesure de l'implémenter, nous devons simplement rassembler le résultat final manuellement et les utiliser comme 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>

Prime

Nous ne devons pas oublier que nous pouvons également appliquer la rotation et / ou l'inclinaison et nous avons plus d'options 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 devons 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>

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/

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

Voici du code pour jouer avec 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. Réglez la hauteur et la largeur sur zéro. Ensuite, supprimez la bordure supérieure et rendez la gauche et la droite transparente, 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;
}

Si vous voulez jouer avec border-size, widthet heightvoir comment ceux -ci peuvent créer des formes différentes, essayez ceci:

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>

Essaye ça:-

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

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

Je sais que c'est un ancien, mais j'aimerais ajouter à cette discussion qu'il existe au moins 5 méthodes différentes pour créer un triangle en utilisant uniquement HTML et CSS.

1. En utilisant borders
2. En utilisant linear-gradient
3. En utilisant conic-gradient
4. Utilisation de transformetoverflow
5. En utilisant clip-path

Je pense que tous ont été couverts ici, sauf pour la méthode 3, en utilisant le conic-gradient, donc je vais le partager ici:

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

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