Articoli

« CSS: proprietà white-space
CSS: proprietà border-style »

Box con angoli stondati e larghezza fissa

di eugy

Spesso ci serve di creare un box con gli angoli stondati; se il box è di larghezza fissa è facile farlo in CSS usando solo due div opportunamente posizionati:

<div id="top">
<div id="bottom">
testo testo testo
</div>
</div>

L’idea è quella di inserire come sfondo del div top l’immagine che formerà il bordo superiore del box, e come sfondo del div bottom l’immagine che formerà il bordo inferiore. Il div top quindi avrà un padding-top pari all’altezza dell’immagine in alto, mentre dovrà avere padding-bottom pari a zero.

div#top {
width: 232px;
background-image: url(right-top.jpg);
background-repeat: no-repeat;
background-position: top left;
margin-left: 0px;
margin-bottom: 10px;
}

div#bottom {
width: 232px;
background-image: url(bottom.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-color: #7c2613;
padding: 0px 0px 0px 0px;
position: relative;
top: 14px;
text-align: center;
}

Qui trovate una dimostrazione

Questa voce è stata inviata il Monday, May 5th, 2008 alle 9:27 am nella categoria Articoli, CSS. Potete seguire i commenti attraverso il feed RSS 2.0. Potete lasciare un messaggio, o fare il trackback dal vostro sito.

Lascia una risposta

Dovete essere loggati per inviare un commento.

Archivi e link