CSS のみを使用してパーセンテージ円グラフを作成するにはどうすればよいですか?

CSS のみを使用したパーセント円グラフ

CSS のみを使用して静的な円要素を作成するには、特定の CSS プロパティを理解する必要があります。

要素 # 2 作成

特定のパーセンテージを表す要素 #2 を作成するには、CSS プロパティを使用します円錐勾配。このプロパティは、親要素の中心に頂点が配置された円錐形のグラデーションを作成します。円錐の角度はパーセンテージ値によって決定され、100% は完全な円を表します。

パーセンテージ値の管理

さまざまなパーセンテージで要素 #2 の形状を管理するには、組み合わせを利用します。 CSS プロパティの:

• conic-gradient: 角度を調整する
• clip-path: 円錐グラデーションの表示領域を制限するには、円形のクリップ パスを使用します。これにより、小さいパーセンテージと大きいパーセンテージの両方で形状が正しく表示されるようになります。

アニメーション

円グラフをアニメーション化するには、アニメーション プロパティを使用し、パーセンテージを次のように設定する from ステートを定義します。 0. パーセント値を徐々に増やすと、円グラフが徐々に埋まっていきます。

四捨五入エッジ

丸みを帯びたエッジを実現するには、2 つのカラー ストップを持つ放射状グラデーションを使用します。 98% の最初のストップは微妙なハイライトを作成し、100% の 2 番目のストップは #0000 を使用してシャープな境界を作成します。マスクまたは -webkit-mask は、グラデーションの一部を選択的に非表示にするために適用されます。

サンプル コード

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;
  
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

以上がCSS のみを使用してパーセンテージ円グラフを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。