Creare un box fluido con angoli tondi utilizzando immagini e CSS

**miki92** · 24-12-2008, 15.04.52

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:

» Background barra:

» Angolo Destro:

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?

**dreadnaut** · 24-12-2008, 15.10.33

probabilmente non hai cercato abbastanza:
- http://www.vertexwerks.com/tests/sidebox/

**miki92** · 24-12-2008, 17.04.09

Direi ottimo però come puoi vedere infondo alla pagina se supera una certa larghezza si visualizza uno spazio bianco che rovina l'effetto.

Per caso hai altri suggerimenti/link/esempi da mostarmi?

**dreadnaut** · 24-12-2008, 17.07.46

Io non vedo alcuno spazio bianco ne con firefox ne con ie7, quindi è un problema tuo.

No, non ho voglia di cercare altre soluzioni solo perchè tu non sei capace di crearle da te, di trovarle da te, o di usare quelle che ti hanno suggerito. Google rounded corners css, e buona fortuna.

Discussione: Creare un box fluido con angoli tondi utilizzando immagini e CSS

LinkBack

Strumenti discussione

Display

Creare un box fluido con angoli tondi utilizzando immagini e CSS

Regole di scrittura