Des triangles en CSS3

Voici une petite astuce, ou plutot quelques lignes de code, qui vous permettrons de réaliser des triangles uniquement à l'aide de CSS.

En bonus, vous trouverez le code vous permettant d'intégrer dans votre site un sympathique bouton "next-prev" dans votre site sans n'utiliser aucune image.

Ces articles sont susceptibles de vous intéresser aussi :

Boutons cliquables Full CSS3

Une galerie d'image évoluée

Un tableau en <div>

 

Les flèches classiques

Ces symbole sont obtenues d'une manière très simple, une balise <div> définie aux dimensions nulles mais en lui assignant une bordure colorée de forte largeur et compensant celle-ci par des bordures transparentes. Et voici le résultat :

 

 

Fleche vers la gauche

.arrow-left {
border-color:transparent #999 transparent transparent ;
border-style:solid;
border-width:10px 20px 10px 0;
height:0;
width:0;
}


Fleche vers la droite

.arrow-right {
border-color:transparent transparent transparent #999;
border-style:solid;
border-width:10px 0 10px 20px;
height:0;
width:0;
}


Fleche vers le haut

.arrow-top {
border-color:transparent transparent #999 transparent ;
border-style:solid;
border-width:0px 10px 20px 10px;
height:0;
width:0;
}


Fleche vers le bas

.arrow-bottom {
border-color: #999 transparent transparent transparent ;
border-style:solid;
border-width:20px 10px 0px 10px;
height:0;
width:0;
}

 

Un peu de fantaisie :

Vous pouvez influer sur la forme générée en modifiant le style de bordure
dashed dotted ridge groove double

 

 

Un bouton de navigation design sans utiliser d'image

Pour réaliser ce bouton, nous utiliserons un conteneur (la taille du bouton) intégrant les 2 éléments <div> représentant les boutons permettant un retour "prev" et une action "next".
Chacun de ces éléments intégrera une autre balise <div>, permettant de réaliser la flèche, qui sera positionné en "absolute".

Next
Prev

le code HTML de ce bouton

<div class="nav-wrapper">
<div class="wrap-left">Next<div class="nav-left"></div></div>
<div class="wrap-right">Prev<div class="nav-right"></div></div>
</div>


et ses règles CSS

.nav-wrapper {
position:relative;
width: 300px;
height: 50px;
border-radius: 8px;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
}

.wrap-left{
font-family: Arial,sans-serif;
font-size: 22px;
line-height:28px;
width: 148px;
height: 43px;
padding-top: 7px;
text-align: center;
color: #000;
border-radius: 8px;
float: left;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
cursor:pointer;
}

.wrap-left:hover{
color: #222;
background: -webkit-linear-gradient( #777, #333);
background: -moz-linear-gradient( #777, #333);
background: -ms-linear-gradient( #777, #333);
background: -o-linear-gradient( #777, #333);
background: linear-gradient( #777, #333);
}

.wrap-left:active{
color: #000;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset;
}

.wrap-right{
font-family: Arial,sans-serif;
font-size: 22px;
line-height:28px;
width: 148px;
height: 43px;
padding-top: 7px;
text-align: center;
color: #000;
border-radius: 8px;
float: right;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
cursor:pointer;
}

.wrap-right:hover{
color: #222;
background: -webkit-linear-gradient( #777, #333);
background: -moz-linear-gradient( #777, #333);
background: -ms-linear-gradient( #777, #333);
background: -o-linear-gradient( #777, #333);
background: linear-gradient( #777, #333);
}

.wrap-right:active{
color: #000;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset;
}

.nav-right {
border-color:transparent transparent transparent #333;
border-style:solid;
border-width:7px 0 7px 14px;
height:0;
width:0;
right:25px;
top:15px;
position:absolute;
}

.nav-left {
border-color:transparent #333 transparent transparent ;
border-style:solid;
border-width:7px 14px 7px 0;
height:0;
width:0;
left:25px;
top:15px;
position:absolute;
}


Spécificité CSS pour Internet Explorer (à intégrer dans votre page IE.css)

.nav-wrapper {
background: #333;
}

.wrap-left{
background: #333;
}

.wrap-left:hover{
background: #525252;
}

.wrap-left:active{
background: #424242;
}

.wrap-right{
background: #333;
}

.wrap-right:hover{
background:#525252;
}

.wrap-right:active{
background: #424242;
}