28173 sujets

CSS et mise en forme, CSS3

Triangles par bordure de DIVs inégaux

Dans le but de faire un afficheur 7 segments en JavaScript tout en travaillant le CSS, j'ai souhaité exploiter la possibilité d'afficher des triangles en jouant sur les bordures d'un élément DIV. Voici ce que j'obtiens :

http://www.enseirb.fr/~bochon/a7s/segment.html

(attention au navigateur* utilisé !)

En regardant bien (copie d'écran et zoom par exemple), on remarque que les deux triangles (eux-mêmes formés de deux triangles) ont 1 pixel de hauteur de différence.

D'où vient cette différence ? Comment la faire disparaître proprement ?





* J'utilise Firefox 1.5.0.9 sous Windows ; sur IE6 c'est du grand n'importe quoi.
Bonjour,

Je ne vais pas être très constructif, mais ne serait-il pas préférable d'utiliser des images pour un tel besoin ? Ca aura l'avantage d'avoir un rendu homogène sur tous les navigateurs, d'être simple et accessible puisque tu pourras facilement spécifier un attribut "alt".
Salut,

Sans js tout en css :

<style type="text/css">
/*Vers le bas*/
.bas {
font-size:0px;
line-height:0%;
width:0px;
border-top:10px solid #f00;
border-left:5px solid #fff;
border-right:5px solid #fff;
}
/*Vers le haut*/
.haut {
font-size:0px;
line-height:0%;
width:0px;
border-bottom:10px solid #f00;
border-left:5px solid #fff;
border-right:5px solid #fff;
}
/*Vers la gauche*/
.gauche {
font-size:0px;
line-height:0%;
width:0px;
border-top:5px solid #fff;
border-right:10px solid #f00;
border-bottom:5px solid #fff;
}
/*Vers la droite*/
.droite {
font-size:0px;
line-height:0%;
width:0px;
border-top:5px solid #fff;
border-left:10px solid #f00;
border-bottom:5px solid #fff;
}
</style>

<div class="haut"></div><br /><div class="bas"></div>


Bon courage
En réponse à Eldebaran :

Au début je pensais utiliser des images, mais ça n'est qu'un exercice personnel, et comme j'ai été intrigué par la possibilité de bidouiller des triangles avec des DIVs, j'ai voulu essayer. L'accessibilité n'est absolument pas mon objectif dans cet exercice.


En réponse à papyjo :

C'est génial ! D'une part, tu arrives à simplifier mon problème en construisant directement un triangle isocèle sans le décomposer en deux triangles rectangle. D'autre part, tu rends cette CSS compatible IE6.

Je suis en train d'essayer en détail ta solution, et apparemment le problème de la différence de hauteur est toujours là, et une bordure transparente (au lieu de blanche) sous IE6 annule l'effet de triangle. Mais je vais sûrement accepter ces deux petites contraintes et continuer.


En réponse à masseuro :

Je n'ai pas trop compris ta réponse, car pour le moment je n'ai pas mis de JavaScript. Il servira pour gérer la mise à jour de l'afficheur complet (7 segments) et la logique combinatoire associée.
Sujet clos
Aller à