©
. Document créé le 14 avril 2005 , mis à jour le 13 mars 2007.On ne va jamais aussi loin que lorsqu'on ne sait pas où l'on va. Christophe Colomb
Accueil du site > Astuces > CSS > Dessiner un triangle en CSS
Il est possible de dessiner un triangle en CSS en jouant sur les bords d’un cadre. En voici un exemple, testé sur :
Windows, IE 6, Firefox 1.02 et Opera 8
Macintosh, IE 5.2 et Safari 1.0.3
<style type="text/css">
<!--
.triangle {
padding:0;
margin:0;
border: 46px solid white; /* Tous les bords en blanc */
border-left-color: red; /* le bord de gauche en rouge */
height:0px; /* Hauteur de l'intérieur de la boîte pour Mozilla et consorts */
_height:92px; /* Pour IE, c'est la hauteur totale */
width:0px; /* Largeur de l'intérieur de la boîte pour Mozilla et consorts */
_width:92px; /* Pour IE, c'est la largeur totale */
_line-height: 0pt; /* force IE à supprimer la fonte */
}
-->
</style>
Est utilisée ici l’astuce du bug IE, en précédant le nom de chaque propriété concernée (qui ne donne pas le même résultat sur les autres navigateurs) par un blanc souligné (_) ou un tiret (-).
Il faut ensuite appliquer la classe à un simple DIV, dont voici la ligne de code :
<div class="triangle"></div>
Voici le style triangle :
A vérifier sur votre navigateur préféré.
Les forums sont fermés.