一个圆形的雪佛龙,嘿?像这样的东西?
我使用伪元素和径向渐变实现了这一点.
.rounded {
height: 200px;
width: 200px;
position: relative;
margin: 100px;
background: tomato;
}
.rounded:before {
content: "";
position: absolute;
top: -20%;
height: 20%;
width: 100%;
left: 0;
background: radial-gradient(ellipse at top center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, tomato 71%, tomato 100%);
}
另一种方法是使用高框阴影值,使用伪元素的框阴影颜色作为主要元素的颜色:
div{
height:200px;
width:200px;
position:relative;
overflow:hidden;
}
div:before{
content:"";
position:absolute;
top:-25%;left:0;
height:50%;
width:100%;
border-radius:50%;
box-shadow:0 0 0 999px tomato;
}
两者都支持html和body标签中的渐变和/或图像.