CSS Triangle Flèche DIV
Une caractéristique subtile
de CSS qui a été exploité
pour faire quelque chose
d'intéressant bordures CSS et l'utiliser
pour créer des triangles CSS pur.
Ces triangles ont l'avantage d'être
extrêmement léger
(aucune image utilisée)
et évolutive pour démarrer. La technique
fonctionne en utilisant le fait que les 4 bordures
CSS d'un élément
de répondre à un angle; lorsque les dimensions de l'élément est
mis à 0, l'effondrement des 4 frontières et toucher un de l'autre
, créant ainsi l'apparence de quatre triangles:
Voici le CSS utilisée pour créer la DIV-dessus:
# Triangles {margin: 3em; largeur: 0; / * dimensions ensemble de DIV à 0 pour son effondrement des frontières et toucher un de l'autre * / height: 0; border-color: rouge bleu vert jaune; / * haut, droite, bas, et de bordure gauche * / border-style: solid; border-width: 50px; / * largeur de chaque frontière * /}
balisage<div id="triangles"> </ div>
Pour afficher simplement un triangle spécifique puis, vous devez définir la frontière en couleurs de toutes les frontières, mais le côté souhaité transparente.
L'exemple suivant ajoute un triangle en CSS à un DIV pour produire un regard bulle qui peut être utilisé pour afficher les commentaires, citations etc Chaque flèche est ajoutée à la DIV, sans majoration utilisé par voie de CSS Generated Content . Le résultat sont régulièrement injectés DIV avec des améliorations progressives CSS qui dégradent ainsi dans les navigateurs moins capables.
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
Le code css
<style>
.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
</style>
Le code html
<div class="uparrowdiv">
This is a test
</div>
<div class="downarrowdiv">
This is a test
</div>
<div class="leftarrowdiv">
This is a test
</div>
<div class="rightarrowdiv">
This is a test
</div>
0 commentaires:
Enregistrer un commentaire