Comment fonctionnent les triangles CSS?


1847

Il existe de nombreuses formes CSS différentes sur CSS Tricks - Shapes of CSS et je suis particulièrement perplexe avec un triangle:

Triangle CSS

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


59
Vous pouvez: jsfiddle.net/wbZet
mskfisher

55
Et la place qui n'est pas là? jsfiddle.net/minitech/sZgaa
Ry-

1
@mskfisher La taille de la bordure inférieure de votre triangle équilatéral ne doit pas être au plafond (sqrt (3) * 60)? Encore quelques pixels!
Niloct

1
@Niloct: Je l'ai rapidement regardé aux chiffres ronds. Vous avez raison, les mesures équilatérales les plus précises seraient (côté: 58, bas: 100) ou (côté: 60, bas: 104).
mskfisher

1
Voici un excellent générateur de triangle CSS pour toutes les directions et tailles: apps.eky.hk/css-triangle-generator
Allan Stepps

Réponses:


2240

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:

les frontières se rencontrent à 45 degrés, contenu au milieu

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

pas de bordure supérieure

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

pas de largeur

... et une hauteur de 0 ...

pas de hauteur non plus

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

bordures latérales transparentes

Cela se traduit par un triangle.


10
@Jauzsika, vous pouvez ajouter ces triangles dans une page sans ajouter d'éléments supplémentaires simplement en utilisant :beforeou des :afterpseudo-classes.
zzzzBov

stackoverflow.com/questions/5623072/… est, je pense, ce à quoi M. BoltClock fait référence.
thirtydot

99
Agissez avec des animations: jsfiddle.net/pimvdb/mA4Cu/104 . Juste pour ceux d'entre nous qui ont besoin d'encore plus de preuves visuelles comme moi ...
pimvdb

Avec un triangle différent left-borderet right-bordernon isocèle, on peut faire. Et quand de nombreux triangles sont combinés ... jsfiddle.net/zRNgz
JiminP

2
En 2018, y a-t-il une meilleure façon de faire un triangle avec CSS plutôt que d'utiliser ce hack?
Scribblemacher

519

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

Exemple de bordure

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.


487

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 :

carré à quatre bordures

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 :

moitié inférieure du carré à quatre bordures

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 :

bordure inférieure triangulaire


21
Cool, mais n'est-ce pas de la même manière? :-)
Stanislav Shabalin

5
There's another way to draw .., qui se révèle être de la même manière :) Belle explication cependant
Hammad Khan

16
-1 pour l'utilisation de JPEG avec des artefacts massifs. Mais +1 pour avoir créé un excellent exemple du moment de ne pas utiliser de fichiers JPEG auxquels je pourrai me lier à l'avenir pour dissuader. ;)
Henrik Heimbuerger

3
pourquoi un gif n'est-il pas utilisé à la place ici?
prusswan

4
Désolé @hheimbuerger, j'ai foiré votre exemple en réparant les images. Vous devrez créer un lien vers la révision 2 de cette réponse à l'avenir.
Rory O'Kane

263

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:

animation gif: comment faire pivoter un triangle avec transformation

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.

Faire un triangle CSS avec transformer roate étape 1

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

Création d'un triangle avec CSS3 étape 2

À 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

Triangle CSS

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.

16
Il vaut probablement la peine de mentionner que le 1,41 est une approximation de √2 et la longueur de l'hypoténuse du triangle que vous créez, c'est pourquoi vous avez besoin (au moins) de cette largeur.
KRyan

Je voulais garder la réponse simple mais vous avez raison, il faut le mentionner @KRyan
web-tiki

En fait, en essayant de l'utiliser, une mention de la façon dont les différentes largeurs à utiliser avec skewXont été dérivées serait utile.
KRyan

1
Cette méthode fonctionne mieux lorsque vous avez besoin d'une bordure pleine de 1px pour le triangle.
Roman Losev

C'est pour le cas où vous voulez créer des bordures pour le triangle, j'étais coincé avec la manière des bordures quand je veux créer cette boîte d'annotation AnnotationBox
vanduc1102

183

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

Gif animé de triangle


Version aléatoire


Version à la fois


49

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:

entrez la description de l'image ici

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

entrez la description de l'image ici

É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

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

Nous avons donc obtenu le triangle dont nous avions besoin.


3
Pourquoi avez-vous utilisé un portail Nether pour la première étape?
LuizLoyola

38

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:

&#9650;

Résultat:

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


2
Je ne pense pas que «battu» soit un mot approprié ici. La solution repose sur les mesures de police, donc le positionnement précis est plutôt douteux, sans oublier que vous n'avez aucun contrôle sur la forme.
user776686

32

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:

Sortie petit triangle

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.

Grand triangle

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

Triangle à angle droit


29

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>


1
comment est-ce pas cross browser? les triangles devraient revenir à IE6.
chriscauley

4
l'utilisation de: avant et: après n'est pas prise en charge à 100%.
PseudoNinja

2
Les éléments pseudo ne sont pas pris en charge <IE8.
alex

19

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:

entrez la description de l'image ici


18

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


C'est une belle solution, mais il convient de noter que c'est uniquement IE 10+.
Eric Hu

13

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


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.


11

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:

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

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:

entrez la description de l'image ici

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


9

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 .


8

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:

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.

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.

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

Triangle CSS avec dégradé

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

Une autre façon est de contrôler la hauteur de div et de garder la syntaxe de gradient facile:

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

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

Triangle CSS avec dégradé

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:

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:

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


4

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

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

2

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>


1

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>


0

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>

Créer des triangles CSS à l'aide d'un gradient conique

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.