パーツ番号 05-12-03 ・ CSSのみ

円グラフ(conic-gradientの静止パイチャート)

conic-gradientのみで描いた静止円グラフです。予算配分や構成比のイメージ図として、サービス紹介ページのアイキャッチに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-03-wrap">
          <div class="d05-12-03-pie"></div>
          <div class="d05-12-03-cap">部門別予算配分</div>
          <div class="d05-12-03-legend">
            <span class="d05-12-03-l1">企画 35%</span>
            <span class="d05-12-03-l2">開発 25%</span>
            <span class="d05-12-03-l3">営業 20%</span>
            <span class="d05-12-03-l4">その他 20%</span>
          </div>
        </div>

CSS

.d05-12-03{padding:20px}
        .d05-12-03-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d05-12-03-pie{width:130px;height:130px;border-radius:50%;background:conic-gradient(#8b5cf6 0deg 126deg,#22d3ee 126deg 216deg,#f472b6 216deg 288deg,#fbbf24 288deg 360deg);box-shadow:0 1px 4px rgba(0,0,0,.08)}
        .d05-12-03-cap{font-size:12px;color:#64748b;font-weight:600}
        .d05-12-03-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
        .d05-12-03-legend span{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
        .d05-12-03-l1{background:#ede9fe;color:#6d28d9}
        .d05-12-03-l2{background:#cffafe;color:#0e7490}
        .d05-12-03-l3{background:#fce7f3;color:#be185d}
        .d05-12-03-l4{background:#fef3c7;color:#92400e}

クラス名 .d05-12-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。