如何仅使用CSS在HTML5中制作甜甜圈片段

如何使这个形状只使用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>

解决方法

我会像这样使用一些线性/径向渐变：

.Box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  linear-gradient(-30deg,white 50%,transparent 0),linear-gradient(30deg,radial-gradient(circle at center,transparent 31%,blue 30%,blue 100%,transparent 51%);
}

<div class="Box">

</div>

并带边框：

.Box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  linear-gradient(to top,white 59%,linear-gradient(-30deg,white calc(50% - 4px),green calc(50% - 4px),green 50%,transparent calc(30% - 4px),green calc(30% - 4px),green 30%,blue calc(70% - 3px),green 0);
}

<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>

这是另一个带有剪辑路径的想法：

.Box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  radial-gradient(circle at center,transparent 51%);
  -webkit-clip-path: polygon(0 0,50% 50%,100% 0);
clip-path: polygon(0 0,100% 0);
}

<div class="Box">

</div>