CSS 带有透明切出圆圈的 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24755864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div with a transparent cut out circle
提问by Aeon Wallace
Can I make a rectagle divwith a half cut out circle using CSS? The half circle should be transparent and let the background show through.
我可以div使用 CSS制作一个带有半切圆的矩形吗？半圆应该是透明的，让背景透过。
desired CSS shape :
所需的 CSS 形状：
HTML :
HTML :
<div></div>
CSS :
CSS :
div{
background : #448CCB;
width:300px;
height:300px;
}
回答by web-tiki
in order to have the white cut out circle transparent and let the background show through it, you can use box-shadowson a pseudo element to minimize markup.
为了让白色切出的圆圈透明并让背景通过它显示，您可以使用box-shadows伪元素来最小化标记。
In the following demo, the blue color of the shape is set with the box shadow and not the background-colorproperty.
在下面的演示中，形状的蓝色是使用框阴影而不是background-color属性设置的。
output :
输出 ：
This can also be responsive : demo
这也可以是响应式的：演示
HTML :
HTML :
<div></div>
CS :
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;
}
回答by ShibinRagh
回答by Veselin
Here is my sollution
这是我的解决方案
HTML:
HTML：
<div id="shape"></div>
CSS:
CSS：
#shape {
width:250px;
height:250px;
background:#448ccb;
position:relative;
}
#shape:before {
content:" ";
position:absolute;
width:250px;
height:250px;
background:#fff;
left:0; top:-50%;
border-radius:50%;
}
Link in jsfiddler: demo
jsfiddler 中的链接：演示
Solition with box-shadow:
带框阴影的求解：
HTML:
HTML：
<div id="wrap">
<div id="shape"></div>
</div>
CSS:
CSS：
#wrap {
background:#ccc;
padding:20px;
}
#shape {
width:250px;
height:250px;
position:relative;
overflow:hidden;
}
#shape:before {
content:" ";
position:absolute;
width:100%;
height:100%;
left:0; top:-50%;
border-radius:50%;
box-shadow:0 0px 0 250px #448ccb
}
Link in jsfiddler: demo
jsfiddler 中的链接：演示
回答by MightyPork
If you don't mind that the "eaten" bit is white and not transparent, yes:
如果您不介意“被吃掉”的部分是白色且不透明，可以：
<div></div>
CSS:
CSS：
div {
width: 250px;
height: 250px;
margin: 10px;
background: #448CCB;
}
div:before {
content:" ";
background:white;
display: block;
width:250px;
height: 125px;
border-radius: 0 0 125px 125px;
}
