制作半圆负CSS边框半径div遮罩的最佳方法是什么？

现在，我看到许多主题都使用了放置在div上的三角形/箭头遮罩

你可以通过视频看到

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

我几乎在那里的径向梯度，但它只是看起来前卫的铬

如果你知道更好的方法，那就太好了

在以下方面的帮助下找到合适的解决方案 它也适用于透明颜色

---

thnx帮助

非常简单，无需干扰径向梯度等

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

#topdiv{
高度：50px；
背景：浅蓝色；
}
#下潜{
位置：相对位置；
高度：50px；
背景：黑色；
}
#半圆{
位置：绝对位置；
高度：30px；
宽度：30px；
顶部：-15px；
左：47%；
背景：浅蓝色；
边界半径：100%100%；
}

---

我在SVG中使用了

剪辑路径

来剪切圆。需要将圆定义为路径，否则将无法反转片段。在我的例子中，圆圈的宽度是80px

SVG

以下是一个工作示例：

---

我会使用伪元素。@Vucko如果您能给出一个示例，那就太好了。我只做了一些小改动。对于

-moz径向梯度

最后一个值增加到

26px

和

高度：52px，如果您可以接受的话。有一个filddle的例子：thnx，但它看起来很糟糕，看这个，chrome@Benn：此线程（）中讨论了许多方法，您可能希望了解这些方法。但无法做到这一点，巴德，请查看此场景，其中bg是圆形必须透明的图像或视频，如果你能想出如何同步bg图像的位置，那么这种方法就行了。可能会很复杂？我很想使用它，但对它的支持不好
.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;
}

<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>

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