▼ Table des matières
LES BORDURES
Bordures arrondies
Documentation
- W3C: les bordures (lien externe)
- Créer des coins arrondis en CSS et sans images (lien externe)
- Ovale et forme elliptique avec CSS3 sans image (lien externe)
- Complément solution CSS3 (lien externe)
Fantaisies créatives
<div style="border:200px solid;border-bottom-color: #6a5acd; border-left-color: #7b68ee; border-right-color: #483d8b; border-top-color: #191970; height: 0px; width: 0px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;"></div>
Le motif ci-dessus est construit à partir d'une utilisation détournée de l'attribut "border". La division (DIV) a une largeur et une hauteur de 0 pixels ; réduite ainsi à une surface de valeur nulle, elle est le point de jonction des 4 bordures latérales d'une épaisseur de 200 pixels chacune ; le tout forme donc un cône 3D à quatre côtés égaux en forme de triangles isocèles que l'oeil discerne grâce à un choix adéquat de 4 couleurs dégradées attribuées à chacune des bordures.
L'exemple suivant est construit sur le même modèle ; mais, dans ce cas, la configuration des bordures est beaucoup plus classiques :
<div style="border:10px solid;border-bottom-color: #6a5acd; border-left-color: #7b68ee; border-right-color: #483d8b; border-top-color: #191970; height: 370px; width: 370px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;"></div>
Le dernier exemple est construit en utilisant d'une manière complémentaire les 2 modèles précédents:
<div style="border:10px solid;border-bottom-color: #cb8931; border-left-color: #e3b148; border-right-color: #b6641b; border-top-color: #a5480b; height: 370px; width: 370px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;"> <div style="border:185px solid;border-bottom-color: #6a5acd; border-left-color: #7b68ee; border-right-color: #483d8b; border-top-color: #191970; height: 0px; width: 0px; margin: 0px;"></div> </div>
