今回はCSSだけで円グラフを作成してみました。
まずはデモから。

See the Pen
by sayuri (@giraffeweb)
on CodePen.0

それぞれ説明していきます。

▼HTML

<div class="per c100 p50">
    <span>50%</span>
    <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
    </div>
</div>

▼SCSS

.per {
  &.c100 {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #ddd;
    margin: 0 2em 0 0;
   }
　&:after{
      position: absolute;
      top: 10px;
      left: 10px;
      display: block;
      content: " ";
      border-radius: 50%;
      background-color: #fff;
      width: 140px;
      height: 140px;
　}
}

ここで大枠の高さと幅を決定します。
円グラフの大小はここで調整してください。
afterではドーナツの穴の部分を作成しています。
大枠の幅に合わせて、高さと
幅のサイズを調整してください。

.per {
  &.c100 {
　　span {
      position: absolute;
      width: 100%;
      z-index: 1;
      left: 0;
      top: 0;
      width: 160px;
      line-height: 160px;
      font-size: 0.2em;
      color: #000;
      display: block;
      text-align: center;
      white-space: nowrap;
      font-size: 18px;
      font-weight: 600;
    }
  }
}

span内はパーセンテージの文字部分の指定です。
円グラフのなかに表示されるように調整しているので
位置を変更したい場合はここを触ってください。

　.slice {
      position: absolute;
      width: 160px;
      height: 160px;
      .bar {
        position: absolute;
        width: 160px;
        height: 160px;
        border-radius: 50%;
　　　　background-image: radial-gradient(#ddd 30%, transparent 31%), conic-gradient(#ff2200 0% 35%, #ddd 35% 100%);
      }
   }

sliceで幅と高さを指定して、中の円グラフのパーセンテージを表す円の指定を
barクラスで行います。

円グラフについては「radial-gradient」と「conic-gradient」を使用します。
詳しい解説はここでは避けますが、グラデーションの種類の一種です。

グラデーションを利用して、円グラフを作成します。
conic-gradientは中心点の周りを回りながら色が変化する画像を生成します。
そのため、「conic-gradient(#ff2200 0% 35%, #ddd 35% 100%)」で全体の背景色とパーセンテージ部分の色と割合を指定します。

みなさんもぜひCSSだけで円グラフの作成をしてみてくださいね！