[CSS]Casete de text elegante

Data de inscriere : 15/08/2011

Cu acest cod puteti pune textul intr-un chenar elegant.

Incepem prin a pune urmatorul cod in foaia de stil CSS:

Cod:: .uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px;
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent;
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{
content:'';
display:block;
position:absolute;
top:100%;
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent;
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:-20px;
width:0;
height:0;
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 10px;
}

In pagina HTML vom marca casetele cu atributul xarrowdiv,unde x este directia sagetii,putem folosi up,down,left sau right.

Cod:: <div class="uparrowdiv">
Ma cheama Gigel si am sageata sus
</div>

<div class="downarrowdiv">
Ma cheama Gigel si am sageata jos
</div>

<div class="leftarrowdiv">
Ma cheama Gigel si am sageata in stanga
</div>

<div class="rightarrowdiv">
Ma cheama Gigel si am sageata in dreapta
</div>

Demo => [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Subiecte similare