What is best way to make half circle negative CSS border radius div mask? [duplicate]

Question

Now days I see many themes using triangle/arrow mask that is placed over a div

you can see it here over the video

But I would like to do a inverted ( negative ) border radius if possible, that forms a half circle , kinda like this

I was almost there with radial gradient but it just looks edgy 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 know a better way to do this.

Found suitable solution with help from here It also works with transparent colors http://jsfiddle.net/EjE7c/2465/ thnx for helping

Answer 1

Pretty easy to do without having to mess with radial gradients and such.

Just make sure the left position of the half circle is 50% - 1/2(width of half circle) , and top position is -1/2*height of half circle.

#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 out the circle. You need to define the circle as a path, otherwise you won't be able to invert the clip. In my example, the circle is 80px 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 one, being a rectangle, and the second one the circle to cut out of it. I also tried using clip-rule="evenodd", but that did not really work for me.

Use it like this in your CSS:

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

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