CSS Circle Pie

by Aleksey Karagodnikov

HTML

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

CSS

pie {
    width: 5em;
    height: 5em;
    display: block;
    border-radius: 50%;
    background-color: green;
    border: 2px solid green;
    float: left;
    margin: 1em;
}

.ten {
    background-image:
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
    background-image:
        linear-gradient(180deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
    background-image:
        linear-gradient(90deg, white 50%, transparent 50%);
}

/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
    background-image:
        linear-gradient(180deg, transparent 50%, green 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
    background-image: none;
}