css – 带有透明切割圆圈的Div [复制]

参见英文答案 > Transparent half circle cut out of a div7个
我可以使用CSS制作带有半切圆的rectagle div吗？半圆应该是透明的,让背景显示出来.

想要的CSS形状：

HTML：

<div></div>

CSS：

div{
    background : #448CCB;
    width:300px;
    height:300px;
}

解决方法

为了使白色剪切圆透明并让背景透过它,您可以在伪元素上使用框阴影来最小化标记.

在下面的演示中,形状的蓝色是使用框阴影而不是背景颜色属性设置的.

DEMO

输出：

这也可以是响应：demo

HTML：

<div></div>

CS：

div{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    bottom:50%;
    width:100%;
    height:100%;
    border-radius:100%;
    Box-shadow: 0px 300px 0px 300px #448CCB;
}