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>
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 .
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With