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

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

I make just little changes. For `-moz-radial-gradient` last value increased to `26px` and `height:52px;`, if that's acceptable for You. There is filddle example : http://jsfiddle.net/EjE7c/2461/ — nelek, Sep 03 '15 at 22:19
@Benn take a look to this: http://stackoverflow.com/questions/23758922/transparent-arrow-triangle. Than just change `background-color` to `rgba(255, 255, 255, 1);`, for 1 example and you will get [this](https://jsfiddle.net/x2zktv1L/). — AleshaOleg, Sep 03 '15 at 22:20
thnx for it but it just looks bad , see this, http://prntscr.com/8cb80j chrome — Benn, Sep 03 '15 at 22:22
@AleshaOleg looking for half circle , not triangle http://jsfiddle.net/EjE7c/2457/ — Benn, Sep 03 '15 at 22:23
@Benn: There are a lot of methods discussed in this thread (http://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div/30726390#30726390) that you may want to have a look at. — Harry, Sep 04 '15 at 04:18

score 3 · Answer 1 · answered Sep 03 '15 at 23:38

3

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

answered Sep 03 '15 at 23:38

CRABOLO

8,605
39
41
68

1

cant do that bud , look at this scenario where bg is an image or video http://jsfiddle.net/xuzxzzpL/2/ that circle must be transparent , – Benn Sep 04 '15 at 08:48
If you can figure out how to synchronize the position of the bg Image, then this approach would work. Could be complicated? – Luke Knepper Oct 05 '17 at 20:44

score 3 · Answer 2 · answered Sep 04 '15 at 00:38

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/

would love to use it but support for it is bad http://caniuse.com/#feat=css-clip-path — Benn, Sep 04 '15 at 08:51

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

2 Answers2