chart html

<!doctype html>
<html>
    <head>
        <title> TEST </title>
        <style>
.chart {
    height: 200px;
    width: 200px;
    position:relative;
}
.chart > div {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
}
.color1 {
    transform:rotate(60deg);
    border:50px solid blue;
}

.color2 {
    transform:rotate(240deg);
    border:50px solid orange;
}

.color3 {
    transform:rotate(-72deg);
    border:50px solid green;
}
.color4 {
    transform:rotate(335deg);
    border:50px solid red;
}

.color5 {
    border:50px solid purple;
}


        </style>
    </head>
    <body>
        <div class="chart">
            <div class="color1"></div>
            <div class="color2"></div>
            <div class="color3"></div>
            <div class="color4"></div>
        </div>
    </body>
</html>