<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%;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Raleway

External JavaScript

This Pen doesn't use any external JavaScript resources.