HTML5 Pie Example

Build a pie chart with markup and css---no js

by nickadeemus2002

HTML

<div class="pie-container">
    <div id="pie1">A</div>
    <div id="pie2">B</div>
    <div id="pie3">C</div>
    <div id="pie4">D</div>
</div>

CSS

.pie-container{
	position:relative;
	background-color:#fafafa;
	left:100px;
	top:60px;
}

.pie-container div{
	width:160px;
	height:160px;
	border-radius:0px;
	position:absolute;
	box-shadow:inset 0px 0px 20px rgba(0,0,0,0.4);
	border:1px solid rgb(0, 0, 0);
	text-align:center;
	color:#666;
	font-family:Helvetica;
	font-size:16px;
	font-weight:bold;
    text-shadow:2px 3px 3px #F2F5A9; /* x-offset, y-offset, strength of blur*/
	line-height:160px;
}


#pie1{
	background-color:rgba(0, 255, 0, 0.3);
	border-top-left-radius:160px;
}

#pie2{
	background-color:rgba(0, 0, 255, 0.3);
	border-top-right-radius:160px;
	top:-10px;
    left:170px;
	width:155px;
	height:155px;
}

#pie3{
	background-color:rgba(255, 0, 0, 0.3);
	border-bottom-right-radius:160px;
	left:160px;
	top:160px;
}

#pie4{
	background-color:rgba(0, 0, 0, 0.4);
	border-bottom-left-radius:160px;
	top:160px;
}