css – 透明半圆切出一个div

我想使用CSS3做透明的半圆形.唯一的要求是形成形状的所有元素必须是黑色或透明的.

我不能使用黑色矩形,其上有一个白色圆圈,因为半圆必须是透明的,让背景显示出来.

所需形状：

解决方法

可能可以用CSS：在这样的伪属性之后：

.rect
{
    height: 100px;
    width: 100px;
    background:rgba(0,0.5);
    position:relative;
    margin-top:100px;
    margin-left:100px;
}
.circle{
    display:block;
    width: 100px;
    height: 50px;
    top:-50px;
    left:0;
    overflow:hidden;
    position:absolute;
}
.circle:after{
    content:'';
    width: 100px;
    height: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background:rgba(0,0);
    position:absolute;
    top:-100px;
    left:-40px;
    border:40px solid rgba(0,0.5);
}

http://jsfiddle.net/FcaVX/2/

原文地址：https://www.jb51.cc/css/217226.html