verosimile.it

Esperimenti CSS

Creare facilmente div con angoli tondi senza usare immagini e javascript

Una soluzione CSS veloce, configurabile, leggera, validata, dal layout elastico. Insomma, una soluzione con le palle... quattro palle, per essere precisi!

Premessa: tengo a precisare che questa è una soluzione che ha la sua ragione di vita nell’essere “cross browser”. Se per voi è sufficente offrire un layout con angoli tondi per gli utenti di Firefox e Safari/Chrome, potete utilizzare la proprietà CSS3 “-border-radius”:

-moz-border-radius: 10px (per Firefox)
-webkit-border-radius: 10px (per Safari/Chrome)

Mesi fa avevo proposto una procedura CSS per creare box con angoli tondi senza immagini, utilizzando le liste di definizione. Vediamo ora una versione che fa uso dei classici div, quindi molto più familiare a chi sviluppa siti web.
Il punto di forza della versione con liste di definizione era il fatto che non venivano richiesti tag aggiuntivi, potendo utilizzare, per creare l’effetto “stondatura”, gli stili applicati ai vari elementi della definition list (dl), ossia i tag definition term (dt) e definition detail (dd).
Ora invece non abbiamo a disposizione che un singolo tag - il div, appunto - per cui saremo costretti ad usare degli elementi aggiuntivi... o qualsi!

Utilizzeremo infatti quattro bullet (•) posizionati alla fine del div, che avranno, nel flusso del documento, la funzione di una spaziatura tipografica (come il tag hr, per intenderci). Come avrete capito, l’escamotage che permette di creare angoli tondi senza immagini o javascript sta tutto nell’utilizzo di questi quattro bullet. Vediamo come.

Parte 1: creare le quattro “gabbie” per gli angoli curvi e posizionarle ai quattro angoli del div.

Partiamo dall’HTML del div:

<div class="div1">
 <h3>Ecco ad esempio un div</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Morbi convallis. Etiam at nunc. Quisque egestas pharetra felis.
  Pellentesque aliquet sagittis velit (...) 
 </p>
 <span class="lt"><b>&#8226;</b></span>
 <span class="rt"><b>&#8226;</b></span>
 <span class="lb"><b>&#8226;</b></span>
 <span class="rb"><b>&#8226;</b></span>
</div>

Notiamo che in un quadro HTML che presenta un normalissimo div con titolo e paragrafo (ma questi due tag sono opzionali e sostituibili con qualsiasi elemento si voglia) risaltano i quattro bullet, ognuno all’interno di uno span e boldato.
Per inciso, le classi di questi span hanno un nome abbastanza intuitivo: lt = left-top, lb = left-bottom, rt = right-top e rb = right-bottom. Semplice, no?

Cominciamo col posizionare i quattro <span> in maniera assoluta ai quattro angoli del div contenitore (al quale avremmo già dato il valore position:relative). Questi span, che trasformiamo in block element tramite la proprietà display:block e ai quali diamo una larghezza e altezza uguale e fissa, nasconderanno tutto il loro contenuto in eccesso (ossia la parte eccedente del bullet), tramite la proprietà overflow:hidden.
Due note importanti: 1) i quattro elementi dovranno avere un colore di sfondo uguale a quello della pagina (o della sezione di pagina) nella quale il div è inserito e 2) altri elementi presenti all'interno del div che possono risultare in prossimità di un angolo curvo (nel nostro caso il titolo h3) dovrebbero avere un posizionamento relativo e uno z-index superiore a quello dei quattro span, in modo da essere sempre in primo piano...
Ecco quindi il la porzione dei CSS relativa al div e agli span nei quali sono inseriti i bullet:

.div1 { 
 margin:10px 0;
 padding:0; 
 width:60%;
 position:relative;
 background-color:DarkSeaGreen;
}

.div1 h3 {
 position:relative;
 z-index:12;
}

.div1 p {
 margin:5px 0;
 padding:10px;
}

/*qui sotto gli stili dei quattro span che contengono i bullet*/

.div1 .lt, .div1 .lb, .div1 .rt, .div1 .rb { 
 position:absolute;
 width:15px;
 height:15px;
 background-color:#fff;
 overflow:hidden;
 display:block;
 z-index:1;
}

.div1 .lt { 
 left:0;
 top:0;
}

.div1 .rt { 
 right:0!important;
 right:-1px; /*fix per IE6 o inferiore*/
 top:0;
}

.div1 .lb { 
 left:0;
 bottom:0;
}

.div1 .rb { 
 right:0!important;
 right:-1px; /*fix per IE6 o inferiore*/
 bottom:0;
}

Quello che vediamo a browser per il momento è questo:

Parte 2: Ricavare degli archi dai quattro bullet “ingabbiati”

Nota: da questo punto in poi ci occuperemo del tag <b> entro cui sono annidiati i bullet. Quindi, ove non specificato, gli stili CSS si intendono applicati a questo elemento.

Cosa andremo a fare ora, per trasformarei bullet nei quattro angoli stondati?
Semplice, “gonfiamo” i bullet agento sulla proprietà font-size del tag <b>, e li coloriamo con la stessa tinta del background del div. Ovviamente, essendo questi dentro un block element di pochi pixel che fa da “maschera” nascondendo il contenuto eccedente (ricordate la proprietà overflow:hidden applicata ai quattro span?), noi ne vedremo solo una porzione... Quella che serve a riempire l’angolo del div, appunto!
Ai bullet dovremmo anche impostare un font specifico (ho scelto il Trebuchet MS perchè diffuso sui principali OS) in modo che la loro dimensione sia sempre uguale, a prescindere dal carattere che si usa nella pagina.
Ci rimane infine solo da aggiustare il posizionamento dei singoli bullet dentro gli span che fanno da “maschera”. Per fare questo agiremo sui margini sinistro e superiore con valori negativi, finchè non avremo “parcheggiato” alla perfezione ogni singolo “pallino” (notiamo che i margini superiori avranno lo stesso valore per gli angoli superiori e inferiori, mentre i margini sinistri avranno lo stesso valore per gli angoli sinistri e destri... essendo il div e i bullet delle figure simmetriche...).
Ecco la parte di CSS realtiva ai bullet (o meglio, al tag <b> che li contiene):

.div1 .lt b, .div1 .lb b, .div1 .rt b, .div1 .rb b { 
 font-size:105px; 
 color:DarkSeaGreen;
 font-family:"Trebuchet MS";
 display:block;
 cursor:default;
 line-height:130px;
}

.div1 .lt b { 
 margin-top:-57px;
 margin-left:-12px;
}

.div1 .lb b { 
 margin-top:-74px;
 margin-left:-12px;
}

.div1 .rt b { 
 margin-top:-57px;
 margin-left:-29px;
}

.div1 .rb b { 
 margin-top:-74px;
 margin-left:-29px;
}

E questo è il div con gli angoli arrotondati completato: Per rendere più chiaro il procedimento col quale abbiamo ottenuto gli angoli tondi, ho evidenziato i quattro bullet, impostandogli il colore rosso ed eliminando la proprietà overflow:hidden allo span che li contiene: Se invece vi state domandando come appariranno i quattro div ad un utente che ha i CSS disabilitati, eccovi uno screenshot dimostrativo: I quattro punti hanno dunque la funzione di separare le varie sezione della pagina, ovviamente se posizionati alla fine del div, come da esempio.

Non ci resta adesso che vedere la pagina di esempio, che presenta anche il codice CSS del DIV con la cornice.