What is the best way to make a semicircle of negative CSS border radius div mask?

Question

I currently see many themes using the triangle / arrow mask located above the div

you can see here above the video

But I would like to make the inverse (negative) radius of the border, if possible, which forms half a circle , like this

I was almost there with a radial gradient, but it just looks annoying in Chrome.

http://jsfiddle.net/EjE7c/2457/

.haflcircle { background: -moz-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px), -moz-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px); background: -o-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px), -o-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px); background: -webkit-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px), -webkit-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px); } .haflcircle { background-position: bottom left, bottom right, top right, top left; -moz-background-size: 50% 50%; -webkit-background-size: 50% 50%; background-size: 50% 50%; background-repeat: no-repeat; height:50px; width:100%; position:absolute; bottom:0; left:0; } 

It would be great if you knew the best way to do this.

Find a suitable solution using here It also works with transparent colors http://jsfiddle.net/EjE7c/2465/ thnx for help

Answer 1

It is quite easy to do without having to bother with radial gradients, etc.

Just make sure that the left position of the semicircle is 50% - 1/2 (the width of the semicircle), and the upper position is 1/2/1/2 * of the height of the semicircle.

 #topdiv { height: 50px; background: lightblue; } #bottomdiv { position: relative; height: 50px; background: black; } #halfcircle { position: absolute; height: 30px; width: 30px; top: -15px; left: 47%; background: lightblue; border-radius: 100% 100%; } 

 <div id="topdiv"></div> <div id="bottomdiv"> <div id="halfcircle"></div> </div> 

jsfiddle

Answer 2

I used clip-path in SVG to cut a circle. You must define the circle as a path, otherwise you cannot invert the clip. In my example, the circle is 80 pixels wide.

Svg

 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="circleClip"> <path d="M0,0H100V100H-100zM5,0a40,40 0 1,0 80,0a40,40 0 1,0 -80,0"/> </clipPath> </defs> </svg> 

The d attribute shows two paths, the first of which is a rectangle, and the second is a circle cut out of it. I also tried using clip-rule="evenodd" , but that didn't help me.

Use it in CSS:

 -webkit-clip-path: url(#circleClip); clip-path: url(#circleClip); 

Here is a working example: http://jsfiddle.net/h2stx2L8/1/