CSS のみの円グラフでスライス間に間隔を追加する方法

CSS のみの円グラフのスライスに間隔を追加する: 実用的なソリューション

CSS のみの手法を使用してレンダリングされた円グラフは、データを視覚化するための洗練されたソリューションを提供します。ただし、スライス間に間隔がないと、グラフの有効性が低下する可能性があります。この問題に対処し、提供された画像に似た円グラフを作成するには、次の手順に従います。

ステップ 1: 不要なクリップ パスを削除する

元のコードではクリップ パスが広範囲に使用されており、不必要な複雑さ。代わりに、絶対位置と境界半径を中心とした単純化された構造を作成します。

ステップ 2: コンテナ Div を作成する

次を使用して、はみ出した領域を隠しながら、すべてのスライスを中央に配置するコンテナ Div を確立します。オーバーフロー: 非表示。

ステップ 3: 絶対配置スライス

コンテナ内で各スライスを絶対位置に配置し、利用可能なスペース全体を占めるように拡張します。 border-radius を利用して、スライスが円形に見えるようにします。

ステップ 4: 境界線の幅と色を定義する

スライスごとに、border プロパティを使用して境界線の幅と色を定義します。カスタム CSS 変数 (例: --c) を利用して境界線の色の変更を簡素化します。

ステップ 5: スライスを回転

各スライスにtransform:rotate()を適用して、スライスを正しく位置合わせします。

コード例

次のコードを実装して円周を作成します。スライス間の間隔がある CSS のみの円グラフ:

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

このコードを使用すると、スライス間に明確な間隔がある、視覚的に魅力的な CSS のみの円グラフを作成できます。

以上がCSS のみの円グラフでスライス間に間隔を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。