制作半圆形负CSS边框半径div蒙版的最佳方法是什么？ [复制]

Question

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

你可以在视频中看到here

但如果可能的话，我想做一个倒置（负）边界半径，形成一个 半圆，有点像这样

我几乎可以使用径向渐变，但它在 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;
}

如果您知道更好的方法来做到这一点，那就太好了。

在here 的帮助下找到合适的解决方案 它也适用于透明颜色 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

Answer 2

我在 SVG 中使用 clip-path 来切出圆圈。您需要将圆圈定义为路径，否则您将无法反转剪辑。在我的示例中，圆圈的宽度为 80 像素。

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>

d 属性显示了两条路径，第一条是矩形，第二条是要从中切出的圆。我也尝试过使用clip-rule="evenodd"，但这并不适合我。

在你的 CSS 中像这样使用它：

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

这是一个工作示例： http://jsfiddle.net/h2stx2L8/1/