HTML
<div class="pie-container">
<div class="pie">
<div id="pie-one" class="pie-piece">
</div>
<div id="pie-two" class="pie-piece">
</div>
<div id="pie-three" class="pie-piece">
</div>
<div id="pie-four" class="pie-piece">
</div>
<div id="pie-five" class="pie-piece">
</div>
<div id="pie-six" class="pie-piece">
</div>
<div id="pie-seven" class="pie-piece">
</div>
</div>
</div>
LESS
.round-borders (@radius: 5px) {
border-radius: @radius;
}
.pie-container {
.pie {
margin: 0 auto;
width: 150px;
height: 150px;
background: #ccc;
.round-borders(75px);
position: relative;
.pie-piece {
width: 0px;
height: 0px;
position: absolute;
top: 0px;
left: 0px;
border: 75px solid;
.round-borders(75px);
border-color: transparent;
transition: 2s;
}
#pie-one {
border-color: blue transparent transparent transparent;
transform: rotate(45deg);
}
#pie-two {
border-color: red transparent transparent transparent;
transform: rotate(135deg);
}
#pie-three {
border-color: green transparent transparent transparent;
transform: rotate(180deg);
}
#pie-four {
border-color: yellow transparent transparent transparent;
transform: rotate(200deg);
}
#pie-five {
border-color: orange transparent transparent transparent;
transform: rotate(240deg);
}
#pie-six {
border-color: black transparent transparent transparent;
transform: rotate(270deg);
}
#pie-seven {
border-color: cyan transparent transparent transparent;
transform: rotate(300deg);
}
}
}
