如何制作半圆形的CSS负边框半径div遮罩层？

Question

如何制作半圆形的CSS负边框半径div遮罩层？

csscss-shapes

7

现在我看到许多主题使用三角形/箭头遮罩放在一个 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/ 感谢您的帮助。

- Benn

@Vucko 如果您能展示一个例子就太好了。 - Benn

我只做了一些小改动。对于-moz-radial-gradient，最后一个值增加到了26px和height:52px;，如果您认为这样可以接受的话。这里有一个示例：http://jsfiddle.net/EjE7c/2461/ - nelek

@Benn 看一下这个链接：https://dev59.com/A2Ag5IYBdhLWcg3wS5aC。然后只需将 background-color 更改为 rgba(255, 255, 255, 1);，例如，你就会得到这个。 - AleshaOleg

1

谢谢你的回复，但是它看起来很糟糕，看这个链接：http://prntscr.com/8cb80j Chrome。 - Benn

1

@Benn：在这个帖子（https://dev59.com/EGoy5IYBdhLWcg3wguWS#30726390）中讨论了很多方法，你可能想要看一下。 - Harry

显示剩余3条评论

2个回答

3

我在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/

- Kevin Hufnagl

1

很想使用它，但是它的支持很差。http://caniuse.com/#feat=css-clip-path - Benn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CRABOLO · Accepted Answer

非常容易操作，无需涉及径向渐变等复杂操作。

只需确保半圆的左侧位置为50％- 半个半圆的宽度，并且顶部位置为半个半圆的高度的负数即可。

#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