我可以使用CSS制作带有半切圆的直肠div
吗?半圆应该是透明的,让背景显示出来。
所需的CSS形状:
HTML:
<div></div>
CSS:
div{
background : #448CCB;
width:300px;
height:300px;
}
答案 0 :(得分:14)
为了使白色剪切圆圈透明并让背景透过它,您可以在伪元素上使用box-shadows
来最小化标记。
在下面的演示中,形状的蓝色是使用框阴影而不是background-color
属性设置的。
<强> 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;
}
答案 1 :(得分:0)
好吗?
div{
width:100px;
height:100px;
background:#03b0d5;
display:block;
position:relative;
overflow:hidden;
}
div:after{
width:100px;
height:100px;
border-radius:50%;
background:#fff;
display:block;
position:absolute;
content:'';
top:-50px;
left:0;
}
答案 2 :(得分:0)
这是我的溶剂
HTML:
<div id="shape"></div>
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%;
}
jsfiddler中的链接:demo
使用box-shadow进行解决:
HTML:
<div id="wrap">
<div id="shape"></div>
</div>
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
}
jsfiddler中的链接:demo
答案 3 :(得分:-2)
如果你不介意&#34;吃掉&#34; bit是白色而不透明,是的:
<div></div>
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;
}