Creare un box fluido con angoli tondi utilizzando immagini e CSS
Buongiorno,
come si intuisce dal titolo vorrei creare una box che abbia gli angoli tondi e che sia fluido.
In rete ho trovato vari esempi come questo, questo o altri che non vi sto ad elencare perchè in rete c'è di tutto e di più.
Ciò che hanno questi esempi e che a me non va a gusto e che non è possibile scrivere nello spazio tra gli angoli.
L'esempio che io dovrei realizzare è il seguente:
Ma per fare questo naturalmente ho diviso questa immagine in tre piccole immaginette che unite dal CSS dovrebbero formare quella barra lì.
» Angolo Sinistro: http://img228.imageshack.us/img228/4785/16609665vp2.png
» Background barra: http://img228.imageshack.us/img228/6785/bgds2.png
» Angolo Destro: http://img444.imageshack.us/img444/9892/41605280yy8.png
Il codice che utilizzo è il seguente:
Codice HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Senza nome 1</title>
<style type="text/css">
body{
background-color:#000000;
}
.angoli{
background-image:url('s.png');
background-position:left;
background-repeat:no-repeat;
}
.angoli div{
background-image:url('d.png');
background-position:right;
background-repeat:no-repeat;
}
.box{
background-image:url('bg.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div class="box"><div class="angoli"><div></div></div></div>
</body>
</html>
L'effetto che più o meno vorrei è il seguente:
Mi sapreste aiutare ad ottenere l'effetto che desidero? Semmai anche con altri codici?
