Question

现在，我看到很多主题使用放在div上的三角形/箭头掩码

您可以在视频

上看到它here

但是我想尽可能做倒置（负）边界半径，形成一个半圈，有点像这样

我几乎有径向渐变，但它在Chrome中看起来很尖锐。

.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 *半圆的高度。

＆＃13;

#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%;
}

＆＃13;

<div id="topdiv"></div>
<div id="bottomdiv">
    <div id="halfcircle"></div>
</div>

＆＃13;

jsfiddle

Answer 2

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

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/

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

2 个答案: