How to make a doughnut segment using only CSS

问题

How to make this shape use only css

how to make this shape use only css

What I have tried:

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

回答1:

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>

And with border:

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

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>

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>

回答2:

In case you prefer your border method more than SVG or gradients, here is an approach using just border-radius, the pseudo element ::after and some 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>

How it works

You can create this shape in two steps.

Step 1: Create a doughnut segment using border-radius: 100% to give it a circle like shape. Then apply a color only to the top border and make the other borders transparent. This way you get a circle segment. Now give your element a width and a height greater than 0 to transform the circle into a doughnut.

Step 2: Apply the same styles to the pseudo element ::after but giving it a slightly less width,height and border width. Adjust the values for your needs. Now position both elements with position: absolute to adjust the position of the overlapping pseudo element to center it properly over the main element.

The good

Better browser compatibility especially for older browsers than gradients, clip-path or SVG.
The angle of the circular shape can simply be adjusted with height and width

The bad

As the other parts of the border are still there (transparent) you need to adjust the size of the parent element according to the shape and set overflow: hidden;
for changing the border width of the shape, you need to reposition the ::after element

You can as well use both pseudo elements ::before and ::after to create the shape and easily adjust the position with sizing and margin (thanks to Temani for pointing this out in the comments):

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

来源：https://stackoverflow.com/questions/49907944/how-to-make-a-doughnut-segment-using-only-css

标签

html

css

css-shapes