CSS Challenge

A good friend of mine, Laurent Brucher was tasked to interview a candidate with regards to his front end skills. We talked for a while, shared ideas and in the end he came up with a clever challenge for the candidate to code out. Inspired in his challenge I’ve crated this one below http://oscarvillarreal.com/2013/02/19/css-challenge-2/

by Girisha Chennura

HTML

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

CSS

.pie{
	width:160px;
	height:160px;
	line-height:160px;
	box-shadow:inset 0px 0px 20px rgba(0,0,0,0.5);
	border:1px solid #000;
	text-align:center;
	font:bold 25px Arial;
    text-shadow: 0 0 3px orange;
    float:left;
}

.pie1{
	background-color:#f4bbc3;
	border-top-left-radius:160px;
}

.pie2{
    margin-left:5px;
	width:155px;
	height:155px;
	background-color:#a9e795;
	border-top-right-radius:160px;
}

.pie3{
    clear:left;
	background-color:#fffde2;
	border-bottom-left-radius:160px;
}

.pie4{
	background-color:#b5d7e3;
	border-bottom-right-radius:160px;
}