如何仅使用 CSS 制作甜甜圈段

Question

如何使这个形状只使用 css

我尝试过的：

.button-up {
  border-top: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom: 35px solid transparent;
  width: 200px;
}

<div class="button-up"></div>

Answer 1

我会选择这样的linear/radial-gradient：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
   linear-gradient(-30deg, white 50%,transparent 50.5%),
   linear-gradient(30deg,  white 50%,transparent 50.5%),
   radial-gradient(farthest-side at center,transparent 40%,blue 41%);
}

<div class="box">

</div>

还有边框：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
   linear-gradient(to top,white 58.5%,transparent 60%),
   linear-gradient(-30deg, white calc(50% - 4px),green calc(50% - 4px) 50%,transparent 0),
   linear-gradient(30deg,  white calc(50% - 4px),green calc(50% - 4px) 50%,transparent 0),
   radial-gradient(farthest-side at center,
    transparent calc(42% - 5px),
    green calc(42% - 4px) 42%,
    blue 42% calc(100% - 4px),green calc(100% - 3px));
}

<div class="box">

</div>

您也可以考虑使用更简单的 SVG：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='300' height='300' fill='blue'>
  <path stroke="green" stroke-width=1 d='M24 32 C28 28 37 28 40 32 L52 22 C38 8 26 8 12 22 Z' />
</svg>

这是clip-path的另一个想法：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  radial-gradient(farthest-side at center,transparent 40%,blue 41%);
  clip-path: polygon(0 0,0 10%, 50% 50%, 100% 10%,100% 0);
}

<div class="box">

</div>

相关问题：CSS Only Pie Chart - How to add spacing/padding between slices?

Answer 2

如果您更喜欢边框方法而不是 SVG 或渐变，这里是一种仅使用 border-radius、伪元素 ::after 和一些 positioning 的方法：

.shape,
.shape::after {
  position: absolute;
  border-radius: 100%;
}

.shape {
  height: 200px;
  width: 200px;
  border: 100px solid transparent;
  border-top: 100px solid #375c89;
}

.shape::after {
  content: '';
  height: 190px;
  width: 198px;
  top: -95px;
  left: -89px;
  border: 90px solid transparent;
  border-top: 90px solid #4f81bc;
}

<div class="shape"></div>

工作原理

您可以分两步创建此形状。

第 1 步：使用border-radius: 100% 创建一个甜甜圈段，使其呈圆形。然后仅将颜色应用于顶部边框并使其他边框透明。这样你就得到了一个圆段。现在给你的元素一个 width 和一个大于 0 的 height 来把圆变成一个甜甜圈。

第 2 步：对伪元素 ::after 应用相同的样式，但要稍微减少 width、height 和边框宽度。根据您的需要调整值。现在用position: absolute 定位两个元素，以调整重叠伪元素的位置，使其在主元素上正确居中。

好的

• 比gradients、clip-path 或SVG 具有更好的浏览器兼容性，尤其是对于较旧的浏览器。
• 圆形的角度可以简单地用height和width调整

不好的

• 由于边框的其他部分仍然存在（透明）您需要根据形状调整父元素的大小并设置overflow: hidden;
• 要改变形状的边框宽度，需要重新定位::after元素

---

您也可以同时使用伪元素::before 和::after 来创建形状，并通过大小和边距轻松调整位置（感谢 Temani 在 cmets 中指出这一点）：

.shape {
  position: relative;
  width: 400px;
  height: 400px;
}

.shape::before,
.shape::after {
  content: '';
  position: absolute;
  border-radius: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
}

.shape:before {
  border: 100px solid transparent;
  border-top-color: #375c89;
}

.shape::after {
  margin: 5px 12px;
  border: 90px solid transparent;
  border-top-color: #4f81bc;
  height: 45%;
}

<div class="shape"></div>