什么是制作半圆负CSS边界半径div掩码的最佳方法？

Question

现在,我看到许多主题使用放在div上的三角形/箭头蒙版

你可以看到它在这里通过视频

但是如果可能的话,我想做一个倒(负)边界半径,形成一个半圆,有点像这样

我几乎在那里有径向渐变,但它在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;
}

如果你知道一个更好的方法来做这件事会很棒.

在这里的帮助下找到合适的解决方案 它也适用于透明色 http://jsfiddle.net/EjE7c/2465/ thnx用于帮助

Answer 1

很容易做到，而不必弄乱径向渐变等。

只需确保半圆的左侧位置为 50% - 1/2（半圆的宽度），顶部位置为 -1/2*半圆的高度。

#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