Angoli arrotondati con l’uso di una unica immagine di sfondo

Per creare un elemento a angoli arrotondati, abbiamo la proprietà css3 border-radius che (purtroppo) non è ancora supportata da tutti i browser. Nel fratempo, possiamo ricreare gli angoli arrotondati in css con l’uso di un unica immagine e la proprietà background-position (e qualche extra div nel nostro html).

Questa unica immagine è composta dai 4 angoli e impostata come immagine di sfondo a 4 div differente seguendo questa struttura html:

• div id="contenitore" : il div principale che contiene sia gli angoli che il contenuto
  • div class="css_angoli" id="angolo_superiore_sinistra" : il div che contiene la parte superiore e a quale è applicato l’immagine di sfondo per creare l’angolo sinistra
    NB: l’uso di una classe comune per tutti gli div con un angolo per evitare di ripetere stesse regole css per ogni uno e l’uso d’un identificatore unico per ogni div con un angolo per posizionare la stessa immagine di sfondo con il background-position
    • div class="css_angoli" id="angolo_superiore_destra" : il div a quale è applicato l’immagine di sfondo per creare l’angolo superiore destra
    • div class="colore_sfondo" : il div che riempi lo spazio con il colore di sfondo tra i 2 angoli
      NB: l’uso di questo extra div è dovuto al fatto che gli angoli sono png trasparente e non si vuole riempire tutto il div del colore di sfondo, il quale coprirebbe tutta la larghezza e renderebbe l’effetto inutile
  • div class="contenuto" : il div che contiene il proprio contenuto
  • div class="css_angoli" id="angolo_inferiore_sinistra" : il div che contiene la parte inferiore e a quale è applicato l’immagine di sfondo per creare l’angolo sinistra
    • div class="css_angoli" id="angolo_inferiore_destra" : il div a quale è applicato l’immagine di sfondo per creare l’angolo inferiore destra
    • div class="colore_sfondo" : lo stesso div che per la parte superiore (di la l’uso della class visto che condividano stesso stile css)

Le regole css usate

Lo stile css è basato principalmente sul uso della proprietà background, riusando la stessa immagine di sfondo e posizionata per ogni angolo in maniera differente con la proprietà background-position.

Altro quello è usato le margine (margin) per allineare i div ‘colore_sfondo’ con i suoi angoli e il height per impostare un altezza specifica (l’altezza degli angoli).

Per fare capire meglio le regole css applicate, allego un immagine del box model.

Di seguito due esempi concreti con relative spiegazione.

Esempio 1 con tinta unita

Immagine usata:

: questa immagine è composta dai 4 angoli e sarà usata come immagine di sfondo

HTML usato (come spiegato prima):

<div id="contenitore">
<div class="css_angoli" id="angolo_superiore_sinistra">
<div class="css_angoli" id="angolo_superiore_destra"></div>
<div class="colore_sfondo"></div>
</div>
<div class="contenuto">CONTENUTO</div>
<div class="css_angoli" id="angolo_inferiore_sinistra">
<div class="css_angoli" id="angolo_inferiore_destra"></div>
<div class="colore_sfondo"></div>
</div>
</div>

Le regole css applicate:

#contenitore{
/*la larghezza del riquadro - non obbligatorio*/
width:300px;
}
/*stile css comune per tutti gli angoli*/
.css_angoli{
/*l’immagine di sfondo*/
background:url(angoli_arrotondati.png) no-repeat;
/*l’altezza - la metà dell’immagine di sfondo*/
height:25px;
}
#angolo_superiore_sinistra{
/*immagine di sfondo posizionata in alto a sinistra*/
background-position:top left;
}
#angolo_superiore_destra{
/*immagine di sfondo posizionata in alto a destra*/
background-position:top right;
}
#angolo_inferiore_sinistra{
/*immagine di sfondo posizionata in basso a sinistra*/
background-position:bottom left;
}
#angolo_inferiore_destra{
/*immagine di sfondo posizionata in basso a destra*/
background-position:bottom right;
}
.colore_sfondo{
/*colore di sfondo per riempire la zona tra i 2 angoli*/
background-color:#99CC33;
/*l’altezza*/
height:25px;
/*posizionamento dell’elemento in rapporto con suoi angoli*/
/*eguale a margin-top:-25px;margin-right:25px;margin-bottom:0;margin-left:25px;*/
margin:-25px 25px 0 25px;
}
.contenuto{
/*colore di sfondo del contenuto*/
background-color:#99CC33;
/*spazio di 20px a destra e sinistra tra il bordo dell’elemento e il suo contenuto - non obbligatorio*/
padding:0 20px;
}

Il risultato con una larghezza fissa di 300px

Il risultato senza specificare una larghezza - larghezza fluida

Esempio 2 con sfondo decorato

Questo esempio, fa l’uso di 4 immagine:

• angoli_arrotondati.png :un immagine composta dai 4 angoli posizionata con il background-position come visto prima
• bordi_orizzontali.png: un immagine composta dai bordi superiore e inferiore applicata a div ‘colore_sfondo’, ripetuta orizzontalmente con repeat-x e di nuovo posizionata con il background position (top o bottom)
• bordo_right.png: un immagine per il bordo destra applicata al div ‘contenuto’, ripetuta verticalmente con repeat-y
• bordo_left.png: un immagine per il bordo sinistra applicata a un extra div dentro ‘contenuto’, ripetuta verticalmente con repeat-y

Il risultato incluso di html e regole css:

PS: metodo provato su IE6, IE7, FF2, FF3, Safari3, Opera9 su Windows

Condividi questo articolo su

angoli arrotondati, css, css angoli, css background, css rounded corner, css sfondo

14 commenti

Rimani aggiornato con il RSS Feed