Dessiner un triangle en CSS

© Christian PAULUS. Document créé le 14 avril 2005 , mis à jour le 13 mars 2007.

L'idéal quand on veut être admiré, c'est d'être mort. Michel Audiard

Accueil du site > Astuces > CSS > Dessiner un triangle en CSS

CSS / CSS 2

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

Plussoyez !

Les forums sont fermés.