"Kreisdiagramm" in CSS erstellen

[Eingeweidemann]

Hallo Leute,
ich wollte mal fragen, wie eine Art Kreisdiagramm in CSS machen. Gedacht ist das als grobe Navigation für die drei unterschiedlichen Aspekte der Seite.
Als Inspiration hat mir das hier gediehnt, aber wenn ich mir die Source anschaue, werde ich einfach nicht schlau daraus.
Ich möchte das am Ende es ungefähr Drittel sind, also das "Code" Segment nach oben kommt und "Blog" & "Design" unten schräg abgeschnitten wird. So wie hier, nur ein bischen gegen den Uhrzeigersinn gedreht.
So weit bin ich jetzt schon:

Das es so grässlich eingefärbt ist, hab ich nur gemacht, damit man die Teile besser auseinander halten kann. Das der Text nicht formatiert ist, ist nicht schlimm.
Auf css3 -moz-transform/webkit-transform würde ich gerne verzichten, weil das dann auf den anderen Browsers ziemlich e aussieht..

HTML

<div id="content_pie">
	<div id="blog_pie" class="top_pie">Blog</div>
	<div id="design_pie" class="top_pie">Design</div>
	<div id="code_pie" class="bottom_pie">Code</div>
</div> <!-- end content pie -->

CSS

/* -- Pie -- */
#content_pie {
	color: white;
	
	width: 250px;
	height: 250px;
	margin: 100px 175px;
}

.top_pie {	
	height: 200px;
	width: 125px;
}
.top_pie:hover {	
	-webkit-box-shadow: 00px 0px 50px  #000;
	-moz-box-shadow: 00px 0px 50px #000;
	box-shadow: 00px 0px 50px #000;
	z-index: 20;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);

}

.bottom_pie {
	height: 125px;
	width: 250px;
}
.bottom_pie:hover {	
	-webkit-box-shadow: 00px 0px 50px  #000;
	-moz-box-shadow: 00px 0px 50px #000;
	box-shadow: 00px 0px 50px #000;
	z-index: 20;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
}
	
#blog_pie {
	background-color: red;
	
	float: left;
	z-index: 1;
	-webkit-border-top-left-radius: 125px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 125px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 125px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
#design_pie {
	background-color: green;
	
	float: right;
	z-index: 1;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 125px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 125px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 125px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
#code_pie {
	background-color: blue;
	
	clear: both;
	margin: auto;
	z-index: 1;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 125px;
	-webkit-border-bottom-left-radius: 125px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 125px;
	-moz-border-radius-bottomleft: 125px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 125px;
	border-bottom-left-radius: 125px;
}

 

[Sven Mintel]

Moin,

ich befürchte, CSS ist da kein gutes Mittel für, schon garnicht, wenn du das Browserübergreifend hinbekommen möchtest

 

[ComFreek]

Ich stimme Sven Mintel zu. Du kannst das severseitig machen (funktioniert auf jeden Fall) oder clientseitig mit JavaScript und Canvas (das versteht aber der IE noch nicht).

Wenn du PHP nimmst, kann ich dir zu PHPChart raten, das kann alle möglichen Diagramme zeichenen!

 

[Steiner_B]

Mit flotr kannst du Kreisdiagramme erstellen. Hier wird auch eine Erweiterung mitgeliefert damit das auf IE läuft.