Comment arquer un bloc ?

Bonjour, Bonsoir, je souhaite crée un anneau et en diviser l'intérieur en 6 bloc (3 à gauche et 3 à droite) pour créer un bloc de partage, pour cela j'aurais besoin d'arquer chaque bloc ou de pouvoir modifier la longueur et la "forme" de chaque segment de chaque bloc, puis de finir avec un transform:rotate(xdeg);, je ne sais pas trop comment faire, avec du javascript ou canvas ? Ou simplement avec un habile jeu de transform en css ? Ci quelqu'un à la solution ou une alternative ?!

J'ai quand même produit une petite base mais pour l'instant je n'arrive pas à aller plus loin
Ps : Il y a deux boutons de navigation dans l'anneau.

Ma page test ou j'essaye de mettre ceci en place, n’hésiter pas à aller la voir pour vous faire une idée de ce que je veux faire.

<div id="socialnavigation">
	<div class="social infobulle" id="socialfacebook" alt="&nbsp;Facebook&nbsp;">
		<a href="" target="_blank">
			<div id="imgsocialfacebook"></div>		
		</a>		
	</div><!-- whitespace
	  --><div class="social infobulle" id="socialtwitter" alt="&nbsp;Twitter&nbsp;">
		<a href="" target="_blank">
			<div id="imgsocialtwitter"></div>		
		</a>		
	</div><!-- whitespace
	--><div class="social infobulle" id="socialgoogle" alt="&nbsp;Google+&nbsp;">
		<a href="" target="_blank">
			<div id="imgsocialgoogle"></div>		
		</a>		
	</div><!-- whitespace
	--><div class="social infobulle" id="socialpinterest" alt="&nbsp;Pinterest&nbsp;">
		<a href="" target="_blank">
			<div id="imgsocialpinterest"></div>		
		</a>		
	</div><!-- whitespace
	--><div class="social infobulle" id="sociallinkedin" alt="&nbsp;Linkedin&nbsp;">
		<a href="" target="_blank">
			<div id="imgsociallinkedin"></div>		
		</a>		
	</div><!-- whitespace
	--><div class="social infobulle" id="socialrss" alt="&nbsp;RSS&nbsp;">
		<a href="" target="_blank">
			<div id="imgsocialrss"></div>		
		</a>		
	</div>
	<div class="navigation">
		<a href="#top">
			<div id="blocktop">
				<div id="topimg" class="navigationimg"></div>
			</div>
		</a>
		<a href="#bottom">
			<div id="blockbottom">
				<div id="bottomimg" class="navigationimg"></div>
			</div>
		</a>
	</div>
</div>

#socialnavigation {
position:fixed;
top:10em;
left:80%;
width:12.5em;
height:12.5em;
border:1px solid #CC4349;
-webkit-border-radius:12.5em;
-moz-border-radius:12.5em;
border-radius:12.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 0 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
}

.social {
display:inline-block;
width:6em;
height:2.25em;
background-color: rgba(30, 30, 30, .75);
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-ms-transition: background-color 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}

.social:hover {
position:absolute;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-ms-transition: background-color 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}

#socialfacebook {position:absolute;margin-left:0;}
#socialfacebook:hover {background-color:rgba(59,89,152,.8);}
#imgsocialfacebook {width:2.5em;height:2.5em;background:url("http://lart-iste.fr/image/template/icone/social.png") 5px 5px;background-repeat:no-repeat;}

#socialtwitter {position:absolute;}
#socialtwitter:hover {background-color:rgba(29,202,255,.8);}
#imgsocialtwitter {width:2.5em;height:2.5em;background:url("http://lart-iste.fr/image/template/icone/social.png") -1105px 5px;background-repeat:no-repeat;}

#socialgoogle {position:absolute;}
#socialgoogle:hover {background-color:rgba(208,68,52,.8);}
#imgsocialgoogle {width:2.5em;height:2.5em;background:url("http://lart-iste.fr/image/template/icone/social.png") -475px 5px;background-repeat:no-repeat;}

#socialpinterest {position:absolute;}
#socialpinterest:hover {background-color:rgba(201,31,38,.8);}
#imgsocialpinterest {width:2.5em;height:2.5em;background:url("http://lart-iste.fr/image/template/icone/social.png") -1135px 5px;background-repeat:no-repeat;}

#sociallinkedin {position:absolute;}
#sociallinkedin:hover {background-color:rgba(1,117,168,.8);}
#imgsociallinkedin {width:2.5em;height:2.5em;background:url("http://lart-iste.fr/image/template/icone/social.png") -685px 5px;background-repeat:no-repeat;}

#socialrss {position:absolute;margin-right:0;}
#socialrss:hover {background-color:rgba(250,173,3,.8);}
#imgsocialrss {width:2.5em;height:2.5em;background:url("http://lart-iste.fr/image/template/icone/social.png") -836px 5px;background-repeat:no-repeat;}

.navigation {
width:8em;
height:8em;
margin-top:2.25em;
margin-bottom:2.25em;
margin-left:auto;
margin-right:auto;
-webkit-border-radius:8em;
-moz-border-radius:8em;
border-radius:8em;
border:1px solid #CC4349;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 0 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
z-index:35;
}

#blocktop {
display:block;
height:50%;
background-color:rgba(30, 30, 30, .7);
-webkit-border-top-left-radius:8em;
-webkit-border-top-right-radius:8em;
-moz-border-radius-topleft:8em;
-moz-border-radius-topright:8em;
border-top-left-radius:8em;
border-top-right-radius:8em;
}

#topimg {
background:url("http://lart-iste.fr/image/template/icone/top.png");
background-position:center center;
background-repeat:no-repeat;
}

#blockbottom {
display:block;
height:50%;
background-color:rgba(30, 30, 30, .9);
-webkit-border-bottom-right-radius:8em;
-webkit-border-bottom-left-radius:8em;
-moz-border-radius-bottomright:8em;
-moz-border-radius-bottomleft:8em;
border-bottom-right-radius:8em;
border-bottom-left-radius:8em;
}

#bottomimg {
background:url("http://lart-iste.fr/image/template/icone/bottom.png");
background-position:center center;
background-repeat:no-repeat;
}

.navigationimg {
height:100%;
}

#blocktop:hover	{background:rgba(204,67,73,0.8);}
#blockbottom:hover {background:rgba(204,67,73,0.8);}

Modifié par Lart-iste (29 Jan 2013 - 22:21)