Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a doughnut segment using only CSS

How to make this shape use only css

doughnut segment 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>
like image 388
Alvaro jose hernandez Avatar asked Apr 18 '18 19:04

Alvaro jose hernandez


People also ask

How do you make a circle donut chart in CSS?

1B) THE CSS (A1) Use width: 300px height: 300px to create a square, and add border-radius: 50% to turn it into a circle. (A2) Next, we specify the segments using conic-gradient . As you already know, a full circle is 360 degrees. So we just specify the segments using COLOR START-DEGREE END-DEGREE .

How do you cut a half circle in CSS?

This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle. border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates.


1 Answers

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>

Related question: CSS Only Pie Chart - How to add spacing/padding between slices?

like image 194
Temani Afif Avatar answered Sep 28 '22 14:09

Temani Afif