如何在不使用 JavaScript 的情況下使用 CSS 建立分段圓？

使用CSS 在圓圈中分段

使用CSS 的border-radius hack 創建圓圈是一種常見的做法，但是如何實現常見的做法分段外觀是否如所提供的圖片所描繪的？有沒有辦法使用 HTML 和 CSS（不包括 JavaScript）來實現此目的？

解決方案

2024 解

讓我們來探索一下根據段是否需要是元素以及它們的大小是否相等而有不同的情況：

1。切片不需要是元素並且它們是相等的

在這種情況下，我們可以利用調色板並使用 SCSS 生成均勻分佈切片的 conic-gradient() 。例如，使用來自coolors.co的調色板，我們可以建立一個SCSS函數：

<code class="scss">@function stops($c) {
  $n: length($c); // number of slices
  $p: 100%/$n; // slice angle as a % of circle
  $l: (); // list of stops, initially empty
  
  @for $i from 1 through $n {
    $l: $l, nth($c, $i) 
        if($i > 1, 0%, unquote(''))
        if($i < $n, round($i*$p), unquote(''))
  }
  
  @return $l
}</code>

此函數產生相等切片的停止清單。然後我們可以在 conic-gradient() 中使用它：

<code class="css">.pie {
  width: 20em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make the element square */
  border-radius: 50%; /* turn square into disc */
  /* equally-sized slices */
  background: conic-gradient(stops($c))
}</code>

這個方法允許我們建立相等的段，而不需要單獨的元素。調整 conic-gradient() 的起始角度也變得可行。

2.其他情況

我們可以探索其他情況，例如：

• 切片不需要是元素，但它們不相等
• 切片需要content/ 動畫出來，它們是相等的
• 切片需要content/ 動畫出來，它們不相等

每個этих 案例都需要獨特的方法和技術，超越原始查詢的範圍。

以上是如何在不使用 JavaScript 的情況下使用 CSS 建立分段圓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！