<h2>Creating Pie Charts</h2>
<div class="container">
<p>Supported Browsers</p>
<div class="pie"></div>
</div>
<div class="container">
<p>Reference Image</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/conic-pie.png"/>
</div>
body {
font-family: 'Raleway';
width: 720px;
text-align: center;
}
p {
margin: 10px;
width: 312px;
text-align: center;
}
img {
width: 304px;
height: 308px;
margin: 8px;
}
.container {
float: left;
display: inline-block;
margin: 10px;
}
.pie {
width: 300px;
height: 300px;
background: conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%);
margin: 10px;
display: inline-block;
border-radius: 50%;
}
This Pen doesn't use any external JavaScript resources.