参见英文答案 >
Transparent half circle cut out of a div7个
我可以使用CSS制作带有半切圆的rectagle div吗？半圆应该是透明的,让背景显示出来.
我可以使用CSS制作带有半切圆的rectagle div吗？半圆应该是透明的,让背景显示出来.
想要的CSS形状：
HTML：
<div></div>
CSS：
div{
background : #448CCB;
width:300px;
height:300px;
}
解决方法
为了使白色剪切圆透明并让背景透过它,您可以在伪元素上使用框阴影来最小化标记.
在下面的演示中,形状的蓝色是使用框阴影而不是背景颜色属性设置的.
输出：
这也可以是响应：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;
}
