how to make a semi circle in css.(without border and outline)

Question

I was tring to make a semi circle in css. (without border and out)

I have also tried this.But,unable

clip-path: circle(100% at 0%);

read again : https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path and try at the most clip-path:circle(50%) to keep the whole circle inside the element itself ; (or clip-path: circle(50% at 0% ); if that was your real expected result ) — G-Cyrillus, Aug 02 '20 at 12:40

score 4 · Answer 1 · answered Aug 02 '20 at 12:49

4

I tried changing the clip-path to 50% and also you have to have a width and a height to the element.

.wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.semi-circle{
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: circle(50% at 0%);
}

 <div class="wrapper">
  <div class="semi-circle">
  </div>
 </div>

The height and width are equal and this is also important. Hope it helped :)

answered Aug 02 '20 at 12:49

claricetorres

128
1
8

if height: 25%; width: 60%; then – Avnoor Singh Bal Aug 02 '20 at 13:04
The height and width of inner div for example? I used pixels and I think in this case it's better. Did you try with percentages? – claricetorres Aug 02 '20 at 13:50

score 1 · Answer 2 · answered Aug 02 '20 at 12:57

You can use canvas to make almost any shape you want. Try the .arc() prop of canvas. .arc( x, y, r, startAngle, endAngle) where : x: x co-ord of centre of circle y: y co-ord of centre of circle r: radius of circle startAngle: start angle in radians to draw the arc endAngle: end angle in radians to draw the arc

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(100, 100, 50, 0*Math.PI,Math.PI, false);
      context.closePath();
      context.fillStyle = 'red';
      context.fill();
    </script>
  </body>
</html>

Here's the jsfiddle link for the same: https://jsfiddle.net/khushboo097/skoqr28w/7/

score 0 · Answer 3 · answered Aug 02 '20 at 12:56

I'm not sure this is what you want, but you could use something like this:

#circle {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

#container {
  width: 50px;
  overflow: hidden;
}

<div id="container">
  <div id="circle"></div>
</div>

score 0 · Answer 4 · answered Aug 02 '20 at 18:12

    <!DOCTYPE HTML>
    <html>
         <head>
              <style>
                     .semicircle:before {
                       content: "";
                       height: 100px;
                       width: 100px;
                       border-radius: 50%;
                       position: absolute;
                       background-color: #eee;
                     }

                     .semicircle {
                       position: relative;
                       height: 50px;
                       width: 100px;
                       overflow: hidden;
                     }
              </style>
       </head>
       <body>
            <div class="semicircle"></div>
       </body>
</html>

I hope it works.

how to make a semi circle in css.(without border and outline)

4 Answers4