如何仅使用CSS制作甜甜圈段 [英] How to make a doughnut segment using only CSS

问题描述

如何仅使用CSS制作此形状

How to make this shape use only 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>

推荐答案

我会使用一些 linear/radial-gradient ，像这样:

I would go with some linear/radial-gradient like this:

.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，它会更简单:

You can also consider SVG which can be easier:

<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 的想法:

Here is another Idea with 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饼图-如何在切片之间添加间距/填充?

这篇关于如何仅使用CSS制作甜甜圈段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！