Cut a circle into half

Question

Can you provide me a suggestion on how to cut this circle into half? Also float them on between left and right.

.hello {
  background-color: red;
  width: 200px;
  height: 180px;
  border: transparent;
  border-radius: 50%;
  opacity: 0.50;
}

<div class="hello"></div>

score 1 · Answer 1 · answered Oct 09 '18 at 03:03

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. That way you get a perfect semi circle.

Try this:

#hello {
    width: 200px;
    height: 100px; 
    background-color: red;
    border-top-left-radius: 110px;  
    border-top-right-radius: 110px;
    border: 10px solid red;
    border-bottom: 0;
    float: right; /* Change this to left to float it to left */
}

<div id="hello"></div>

I have made it float right. Just change the value to left to change to float: left;

Hope this helps!

isn't this a copy from here : https://stackoverflow.com/questions/22415651/half-circle-with-css-border-outline-only? .. it's funny how you kept the border as we don't need them since it's one color circle ;) — Temani Afif, Oct 09 '18 at 08:34

score 0 · Answer 2 · answered Oct 09 '18 at 03:33

you should first make 2x1 Rectangle, then with border-radius make it round, but in just to side. see below code:

.half-circle {
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    border: 1px solid red;
}

To make an awesome CSS shapes you can see this cheatsheet page.

Cut a circle into half

2 Answers2