Comment fonctionnent les triangles CSS?
Il ya beaucoup de différentes formes CSS plus à CSS trucs-formes de CSS et je suis particulièrement intrigué par 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 cela fonctionne?
18 réponses
CSS Triangles: Une Tragédie en Cinq Actes
comme alex a dit , frontières de largeur égale butt up l'un contre l'autre à des angles de 45 degrés:
quand vous n'avez pas de bordure supérieure, il ressemble à ceci:
puis vous lui donnez une largeur de 0...
...et une hauteur de 0...
...et enfin, vous rendez les deux bordures latérales transparentes:
qui donne un triangle.
les bordures utilisent un bord angulaire où elles se croisent (angle de 45° avec des bordures de largeur égale, mais changer la largeur des bordures peut fausser l'angle).
jsFiddle .
en cachant certaines frontières, vous pouvez obtenir l'effet triangle (comme vous pouvez le voir ci-dessus en faisant les différentes parties de différentes couleurs). transparent est souvent utilisé comme couleur de bord pour obtenir en forme de triangle.
commence par un carré de base et des frontières. Chaque bordure aura une couleur différente pour qu'on puisse les distinguer:
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;
}
qui vous donne ce :
mais il n'y a pas besoin de la bordure supérieure, donc réglez sa largeur à 0px . Maintenant notre bord inférieur de 200px fera notre triangle de 200px 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 ce :
ensuite, pour cacher les deux triangles latéraux, définissez la couleur de bordure à transparent. Puisque la bordure supérieure a été effectivement supprimée, nous pouvons également définir la bordure supérieure à la couleur transparente.
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
enfin nous obtenons ce :
approche Différente:
CSS3 triangles avec transformer rotation
forme triangulaire est assez facile à faire en utilisant cette technique. Pour les personnes qui préfèrent voir une animation expliquant comment cette technique fonctionne ici, c'est :
- lien vers L'ANIMATION 1519250920 "Comment faire un CSS3 triangle .
- Et DÉMO : CSS3 triangles faite avec de la transformer en rotation.
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 isocèle à angle droit avec un élément.
- Note 1: pour les triangles non isocèles et de fantaisie, vous pouvez voir l'étape 4 .
- Note 2 : dans les extraits suivants, les préfixes de vendeur ne sont pas inclus. ils sont inclus dans le codepen démos .
- Note 3: le HTML pour l'explication suivante est toujours:
<div class="tr"></div>
étape 1: faire une div
facile, assurez-vous que width = 1.41 x height . Vous pouvez utiliser n'importe quelle techinque ( voir ici ) y compris l'utilisation de pourcentages et de rembourrage-bas pour maintenir le rapport d'aspect et faire un triangle réactif . Dans l'image suivante, la div a une bordure jaune d'or.
dans ce div, insérer un pseudo element et lui donner 100% largeur et hauteur de parent. Le pseudo-élément a un fond bleu dans l'image ci-dessous.
à ce point, 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 : nous allons faire tourner
tout d'Abord, le plus important : définir une transformation origine . Le origine par défaut est au centre de l'élément pseudo et nous en avons besoin à en bas à gauche. En ajoutant ce CSS à l'élément pseudo:
transform-origin:0 100%; ou transform-origin: left bottom;
maintenant nous pouvons tourner le pseudo élément 45 degrés dans le sens des aiguilles d'une montre avec transform : rotate(45deg);
à ce point, 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: le cacher
à masquer les parties indésirables du pseudo élément (tout ce qui déborde le div avec la bordure jaune) vous avez juste besoin de mettre overflow:hidden; sur le conteneur. après avoir enlevé la bordure jaune, vous obtenez... a 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:
- les rendre plus minces ou plus plates en jouant avec
skewX(). - les faire pointer vers la gauche, la droite ou toute autre direction en jouant avec l'orignal transform et la direction de rotation.
- Faire une réflexion avec la 3D propriété transform.
- donner le triangle frontières
- Mettre une image à l'intérieur du triangle
- beaucoup plus... Libérez les pouvoirs de CSS3 !
Pourquoi utiliser cette technique?
- Triangle peut facilement être sensible.
- vous pouvez faire un triangle avec bordure .
- , Vous pouvez maintenir les limites du triangle. Cela signifie que vous pouvez déclencher l'état de vol stationnaire ou l'événement de clic seulement 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 de sorte que chaque triangle a son propre état de vol stationnaire.
- Vous pouvez faire de la effets de fantaisie, comme des reflets .
- il vous aidera à comprendre les propriétés de transformation 2d et 3d.
pourquoi ne pas utiliser cette technique?
- le principal inconvénient est le compatibilité de navigateur , les propriétés de transformation 2d sont pris en charge par IE9+ et donc vous ne pouvez pas utiliser cette technique si vous envisagez de prendre en charge IE8. Voir CanIuse pour plus d'information. Pour certains effets de fantaisie en utilisant la 3d transforme comme la réflexion le support du navigateur est IE10+ (voir canIuse pour plus d'informations).
- vous n'avez pas besoin de quoi que ce soit de responsive et un simple triangle est très bien pour vous, alors vous devriez aller pour la technique de bordure expliqué ici : une meilleure compatibilité de navigateur et plus facile à comprendre grâce aux poteaux d'amaigrissement ici.
Voici une animation en JSFiddle que j'ai créée pour la démonstration.
Voir aussi l'extrait ci-dessous.
C'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>Aléatoire version
/**
* 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>Tout à la fois la version
$('#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 la div:
<div id="triangle" />
maintenant éditez la CSS étape par étape, de sorte que vous aurez une idée claire de ce qui se passe autour de
étape 1: JSfiddle Lien:
#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;
}
C'est un simple div. Avec un CSS très simple. Si un profane peut comprendre. Div a des dimensions de 150 x 150 pixels avec une bordure de 50 pixels. L'image est jointe:
ÉTAPE 2: JSfiddle Lien:
#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 jsfiddle Link:
#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 & 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 frontières transparentes en dehors de la frontière du bas. L'image est jointe ci-dessous.
étape 5: JSfiddle Lien:
#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 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 trucs css n'oubliez pas des solutions aussi simples que des entités html:
▲
résultat:
▲
Voir: Quelles sont les entités HTML pour monter et descendre les triangles?
Considère le triangle ci-dessous
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
C'est ce qui nous est donné:
Pourquoi est-il sorti sous cette forme? Le diagramme ci-dessous explique les dimensions, notez que 15px a été utilisé pour le bord inférieur et 10px a été utilisé pour la gauche et la droite.
il est assez facile de faire un triangle à angle droit aussi en enlevant la partie droite de la bordure.
aller un peu plus loin, en utilisant css basé sur ceci j'ai ajouté des flèches à mon dos et les boutons suivants (Oui je sais que ce n'est pas 100% cross-browser, mais slick néanmoins).
.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>approche différente. Avec gradient linéaire (pour IE, SEULEMENT 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
OK, ce triangle sera créé en raison de la façon dont les bordures des éléments fonctionnent ensemble en HTML et CSS...
comme nous utilisons habituellement des bordures 1 ou 2px, nous ne remarquons jamais que les bordures font un angles de 45° à l'autre avec la même largeur et si la largeur change, le degré d'angle obtenir changé ainsi, exécuter 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, dans l'étape suivante, nous n'avons pas de largeur ou 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 de gauche et de 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 voulez pas lancer le snippet pour voir les étapes, j'ai créé une séquence d'image pour avoir un regard à toutes les étapes dans une image:
C'est une vieille question, mais je pense qu'il vaut 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 utiliserons la pseudo classe :after et le positionnerons juste au-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 nous avons juste à définir la couleur de bordure prédominante du deuxième triangle à 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> violon avec toutes les flèches:
http://jsfiddle.net/tomsarduy/r0zksgeu /
CSS clip-path
C'est quelque chose que je sens que cette question a manqué; clip-path
La coupure
clip-pathen un mot, avec la propriété
clip-path, s'apparente à la Coupe d'une forme (comme un cercle ou un pentagone) à partir d'un morceau de papier rectangulaire. La propriété appartient à la" CSS Masking Module Level 1 " spécification. La spécification précise que "le masquage CSS fournit deux moyens pour cacher partiellement ou totalement des parties d'éléments visuels: le masquage et le clipping".
clip-path va utiliser l'élément lui-même plutôt que ses frontières pour couper la forme que vous spécifiez dans ses paramètres. Il utilise un système de coordonnées très simple basé sur un pourcentage ce qui rend l'édition très facile et signifie que vous pouvez le ramasser et créer des formes étranges et merveilleux en quelques minutes.
En Forme De Triangle Exemple
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>à la Baisse
il a un inconvénient majeur à l'heure actuelle, l'un étant son manque majeur de soutien, seulement être vraiment couvert par -webkit- les navigateurs et n'ayant aucun support sur IE et seulement très partiel dans FireFox.
ressources
voici quelques ressources et matériaux utiles pour aider à mieux comprendre clip-path et aussi commencer à créer votre propre.
Sass (SCSS) triangle mixin
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);
}
aire de Jeux de la page
note importante:
si le triangle semble pixelisé dans certains navigateurs, essayez l'une des méthodes décrites ici .
j'ai fait un échantillon dans enjoycss
vous pouvez jouer avec elle et voir comment les choses changements ;)
presque toutes les réponses se concentrent sur le triangle construit en utilisant border donc je vais élaborer la méthode linear-gradient (comme commencé dans la réponse de @lima_fil ).
en utilisant une valeur de degré comme 45° nous forcera à respecter un rapport spécifique de height/width afin d'obtenir le triangle que nous voulons et ce ne sera pas responsive:
.tri {
width:100px;
height:100px;
background:linear-gradient(45deg, transparent 50%,red 0);
/*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 ceci nous devrions considérer des valeurs prédéfinies de direction comme to bottom , to top , etc. Dans ce cas, nous pouvons obtenir n'importe quel type de forme de triangle tout en le gardant réactif.
1) Rectangle triangle
pour obtenir un tel triangle nous avons besoin d'un gradient linéaire et d'une 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 50%,red 0);
border:1px solid;
animation:change 2s linear infinite alternate;
}
.tri-2 {
background:linear-gradient(to top right, transparent 50%,red 0);
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 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 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:50.9% 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
C'est un peu difficile à gérer car nous avons besoin de maintenir une relation entre la hauteur et la largeur du gradient. Nous aurons le même triangle comme ci-dessus, mais nous allons faire le calcul plus complexe, afin de transformer la isocèle triangle équilatéral.
pour le rendre facile, nous considérerons que la largeur de notre div est connue et la hauteur est assez grande pour pouvoir dessiner notre triangle ( height >= width ).
nous avons nos deux gradients g1 et g2 , la ligne bleue est la largeur du div w et 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 dégradé hg et nous pouvons facilement obtenir la formule ci-dessous:
(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w
donc nous devons compter sur cacl() pour faire nos calculs et obtenir le résultat nécessaire:
.tri {
--w:100px;
width:var(--w);
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:calc(var(--w)/2 + 0.5%) 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>4) triangle aléatoire
pour obtenir un triangle aléatoire, il est facile que nous avons simplement besoin d'enlever la condition de 50% de chacun mais nous devons garder deux condition (les deux devraient avoir la même hauteur et la somme des deux largeur devrait ê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 si nous voulons définir une valeur pour chaque côté? Nous avons simplement besoin de faire des calculs à nouveau!
définissons hg1 et hg2 comme la hauteur de notre gradient (les deux sont égaux à la ligne rouge) puis wg1 et wg2 comme la largeur de notre gradient ( wg1 + wg2 = a ). Je ne détaillerai pas 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 que même avec calc() nous ne serons pas en mesure de mettre en œuvre ce si nous avons simplement besoin de recueillir le résultat final à la main et de 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 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
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 également appliquer la rotation et / ou de biais et nous avons plus option pour obtenir plus de triangle:
.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 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
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é 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;
}
D'autres l'ont déjà bien expliqué. Laissez-moi vous donner un animation qui expliquera cela rapidement: http://codepen.io/chriscoyier/pen/lotjh
voici un peu de code pour vous de 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;
}
jouer avec cela et voir ce qui se passe. Définir la hauteur et la largeur à zéro. Ensuite, supprimez la bordure supérieure et faites à gauche et à droite transparent, ou tout simplement regarder le code ci-dessous pour faire un triangle css:
#border-demo {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}