Dessiner un triangle en CSS
© . 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
CSS / CSS 2
Mots-clés
- Personnaliser le curseur pour son site web
- Marges d’un bloc par défaut
- Changer de classe à la volée
- Centrer un bloc dans la page
- 4 colonnes en tableau sans tableau
- Contourner le code CSS avec des hacks
- Interprétation de em et ex
- Fond et image de fond (motif)
- Forcer font-weight pour IE 6
- Les propriétés CSS respectées sur PIE 2003
- Fontes Explorer, Firefox et PDA
- Dessiner un triangle en CSS
- Rappel sur le style
- Un éditeur de style
- Effets de style, filtres graphiques
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.
RSS 2.0
