Creare box ad angoli curvi con i CSS

L' uso di questo codice pare non avere limiti. La speranza è che se ne faccia sempre più uso. Comincio con il mostrare una immagine con i quattro angoli arrotondati:

Tale immagine misura 500 X 160 pixel e noi otterremo lo stesso box con i quattro angoli arrotondati, dello stesso colore; con la differenza, se vi può sembrare poco, che utilizzeremo solo codice CSS.

Il contenitore generale

Per poter realizzare questo box, dobbiamo avere un contenitore generale all' interno del quale inscriveremo altri #div. La dichiarazione del codice è:

.container {
 position:relative; 
 width:500px; 
 height:160px; 
 background:#f95000; 
 color:#000; 
 margin:40px auto;
 }  

Fin qui nulla di particolare. Possiamo vedere il risultato di questo codice dopo la precedente dichiarazione e cosa ha prodotto. Ora dobbiamo dichiarare e realizzare i box per i quattro angoli; per fare facilmente riferimento ad essi, li chiameremo:
atleft, atright, abright, ableft. In senso orario sono: angolo top left, angolo top right, angolo bottom right ed angolo bottom left. Li posizioneremo in maniera assoluta all' interno di container; il loro codice CSS è:

#atleft, #atright, #abright, #ableft{
 position:absolute; 
 width:20px; 
 height:20px; 
 color:#000;
 background:#fff;
 }
 #atleft{
 top:0; 
 left:0;
 }
 #atright{
 top:0; 
 right:0;
 }
  #abright{
 top:140px;
 right:0;
 }
 #ableft{
 top:140px;
 left:0;
 }  

Nel primo codice raggruppato ho fatto una dichiarazione comune ai 4 box. Nelle seccessive dichiarazioni, invece, ho scritto la posizione per ogni singolo elemento. Se si legge attentamente il codice è di facile comprensione. Il risultato che si ottiene lo si può visualizzare nella pagina di esempio. Passiamo adesso a scrivere il codice per altri quattro box che nella pagina html, inseriremo nei box precedenti. Partiamo sempre dal box in alto a sinistra ed in senso orario; il loro nome è: qtleft, qtright, qbright, qbleft. Come per i primi quattro abbiamo: quadrato top left, quadrato top right, quadrato bottom right e quadrato bottom left. Il codice CSS è:

#qtleft, #qtright, #qbright,#qbleft {
 position:absolute; 
 font-size:150px; 
 font-family: Arial; 
 color:#000;
 line-height:40px;
 }
 #qtleft{left:-8px;}
 #qtright {left:-25px;}
 #qbright {left:-25px; top:-17px;}
 #qbleft {left:-8px; top:-17px;}  

Stessa situazione come nel codice precedente: nella dichiarazione raggruppata ho assegnato le proprietà comuni a tutti. In quelle singole la posizione che deve assumere ogni elemento. Da notare che le posizioni dei singoli box devono essere "trovate" facendo diverse prove ed incastrandole al posto esatto. Nella pagina di esempio che vedremo, troveremo dei cerchi ottenuti con il semplice valore htm • e di colore nero; proprio per far vedere la posizione ai quattro angoli. Come abbiamo potuto ottenere questo? Impostando una grandezza di font pari a 150 pixel; adattando il line-height a 40 pixel e la posizione corretta data con i margini negativi.

Inserire testo nel box

Dobbiamo lasciare vuoto il box con gli angoli arrotondati? Cero che no! Possiamo inserirci anche del testo. Come fare allora? Basta dichiarare un altro elemento di blocco con le seguenti proprietà:

#testo {
 position:absolute; 
 top:20px;
 right:10px;
 bottom:10px;
  left:20px;
 z-index:10;
 color:#000;
 text-align:left;
 font-size:80%;
 }  

I valori assegnati alla posizione assoluta di questo ultimo elemento, dipendono esclusivamente dalla formattazione che vogliamo dare a tutto il contesto; se si desidera avere parole più attaccate ai lati del container, basta diminuire il valore di top, right, bottom e left. Lo z-index serve in quanto vogliamo che il testo, ovviamente, stia sopra tutti i livelli. Giunti al termine di questo articolo, l'esempio finale ci mostrerà tutto quanto descritto passo passo fino ad ora.
Alla prossima.