Menu circular CSS3

manuxdjent · #1 (**permalink**) 31/03/2012, 11:07

Hola a todos , estoy maquetando mi primera web en CSS3 y tengo una duda, ¿Alguien me puede decir como puedo insertar un menú en un DIV circular y que el menu se adapte al circulo?. Aquí os adjunto el código, el DIV "centro" es un circulo mas grande que el DIV centroencima que va encima del DIV centro.

HTML

Código:

<!DOCTYPE HTML>
<HTML>
	<HEAD>
	<LINK rel="stylesheet" type="text/css" href="style.css">
	</HEAD>
	<BODY>

	<DIV id="centro">

		<DIV id="centroencima">

		</DIV>
	</DIV>
	</BODY>
</HTML>

CSS

Código:

#centro{
border: 1px solid black;
border-radius: 200px;
background-image: -webkit-gradient(linear, center top, center bottom, from(#bfbfbf), to(#fcfcfc), color-stop(10%, #d9d9d9), color-stop(88%, #f2f2f2), color-stop(97%, #f7f7f7));
background-image: -webkit-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: -moz-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: -o-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: -ms-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: linear-gradient(to bottom, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
-webkit-box-shadow: 0 1px 0 white, inset 0 1px 7px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 0 white, inset 0 1px 7px rgba(0,0,0,0.4);
box-shadow: 0 1px 0 white, inset 0 1px 7px rgba(0,0,0,0.4);
height:400px;
width:400px;
margin:0 auto;
margin-top:120px;



}
#centroencima{
border: 1px solid black;
border-radius: 200px;
background-image: -webkit-gradient(linear, center top, center bottom, from(#d1ede9), to(#00bfa2), color-stop(3%, #c1e9e3), color-stop(12%, #b1e4dc), color-stop(90%, #59d2bf));
background-image: -webkit-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: -moz-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: -o-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: -ms-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: linear-gradient(to bottom, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
height:300px;
width:300px;
margin:0 auto;
position:relative;
top:50px;
}
body{
background-color:#d1ede9;

}

Gracias.