<div id="content">
  <h1>CSS Pie Chart</h1>
  <div id="graph"></div>
  <div id="legend">
    <span>Option 1</span>
    <span>Option 2</span>
    <span>Option 3</span>
    <span>Option 4</span>
  </div>
</div>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  --color1: #ee4266;
  --color2: #4266ee;
  --color3: #ffd23f;
  --color4: #228822;
}

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Verdana, Arial, sans-serif;
  transition: all 0.5s
}

#content:hover {
  filter: grayscale(1);
}

#graph {
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  background: conic-gradient(
    var(--color1) 33%, 
    var(--color2) 0 55%, 
    var(--color3) 0 90%, 
    var(--color4) 0
  );
}

#legend {
  margin-top: 1.5rem;
}

#legend span {
  margin-right: 0.5rem;
  display: inline-block;
}

#legend span::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: bottom;
  margin-right: 0.25rem;
}

#legend span:nth-child(1)::before { background: var(--color1); }
#legend span:nth-child(2)::before { background: var(--color2); }
#legend span:nth-child(3)::before { background: var(--color3); }
#legend span:nth-child(4)::before { background: var(--color4); }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js