円グラフをCSSのみで表現する | Pulp Note

円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。 .pie { position: relative; margin-right: auto; margin-left: auto; width: 300px; height: 300px; background-image: conic-gradient(#d5525f 0% 60%, #d9d9d9 60% 100%); border-radius: 50%; } .pie span { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); color: #fff; font-size: 26px; font-weigh