Il y a beaucoup de formes sur une autre feuille de style CSS à http://css-tricks.com/examples/ShapesOfCSS/ et je suis particulièrement surpris avec un triangle:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Alors, comment et pourquoi ça marche?
Comme alex l'a dit, les frontières de l'égalité de largeur bout à bout les uns contre les autres à 45 degrés des angles:
Lorsque vous n'avez pas de frontière supérieure, il ressemble à ceci:
Alors donnez-vous une largeur de 0...
...et une hauteur de 0...
...et enfin, à vous de faire les deux côtés des frontières transparent:
Que les résultats dans un triangle.
La Fin
Les frontières de l'utilisation d'un bord incliné où ils se croisent (angle de 45° avec la même largeur de frontières, mais la modification de la frontière largeurs, vous pouvez incliner l'angle).
En cachant certaines frontières, vous pouvez obtenir le triangle en effet, comme vous pouvez le voir ci-dessus en faisant les différentes parties de couleurs différentes). transparent est souvent utilisé comme une pointe de couleur pour réaliser la forme du triangle.
Commencez avec une base carrée et de frontières. Chaque frontière sera donné 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 la bordure du haut, afin de définir sa largeur - 0px. Maintenant, notre bas de la bordure de l' 200px va faire de notre triangle de 200px de hauteur.
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
et nous allons obtenir ce:
Alors pour masquer les deux triangles sur le côté, la frontière-couleur transparente. Depuis le haut-frontière a été effectivement supprimé, nous pouvons définir la frontière-top-couleur transparent.
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
enfin, nous obtenons ceci:
De 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, vous pouvez suivre ce lien :
De l'Animation, de la façon de faire un CSS triangle avec transformer tourner
DÉMO de triangles faite avec de la transformer tourner
Sinon, voici une explication plus détaillée en 4 actes (ce n'est pas une tragédie) comment faire un rectangle isocèle triangle rectangle avec un seul élément (remarque: pour les triangles isocèles et de fantaisie, vous pouvez voir l'étape 4):
Clause de non-responsabilité : dans les extraits suivants, le vendeur préfixes ne sont pas inclus. ils sont inclus dans le codepen démos
Code HTML pour l'explication suivante:
<div class="tr"></div>
Facile, il suffit de faire shure qu' width = 1.41 x height. Vous pouvez utiliser n'importe techinque (voir ici), y compris l'utilisation de pourcentages et de rembourrage-bas pour maintenir le ratio d'aspect et prendre un réactif triangle. Dans l'image suivante, la div a un jaune d'or de la frontière.
Dans ce div, insérer un pseudo-élément et lui donner 100% de la largeur et de la hauteur de parent. Le pseudo-élément a un fond bleu dans l'image ci-dessous.
À 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;
}
Tout d'abord, le plus important : définir une transformation de l'origine. La valeur par défaut d'origine est au centre de la pseudo-élément et nous en avons besoin, en bas à gauche. En ajoutant cette CSS pour le pseudo-élément : transform-origin:0 100%; ou transform-origin: left bottom;
Nous pouvons maintenant faire pivoter le pseudo élément de 45 degrés dans le sens horaire 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);
}
Pour masquer les parties non désirées de la pseudo-élément (tout ce qui déborde de la div avec le cadre jaune) il vous suffit de définir overflow:hidden; sur le conteneur. après le retrait de la bordure jaune, vous obtenez... un 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);
}
Comme montré dans la démo, vous pouvez personnaliser les triangles :
skewX(). 
Voici une animation en JSFiddle j'ai créé pour la démonstration:
<div class="border"></div>
.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
}
$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
$(this)
.animate({
'border-top-width': 0
}, duration)
.animate({
'border-left-width': 30
}, duration)
.animate({
'border-right-width': 30
}, duration)
.animate({
'border-bottom-width': 80
}, duration)
.animate({
'width': 0
}, duration)
.animate({
'height': 0
}, duration)
.animate({
'borderRightColor': 'transparent'
}, duration)
.animate({
'borderLeftColor': 'transparent'
}, duration)
}).end()
}(jQuery))
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
