<div></div>
<style>
div{
position:relative;
width:150px;
height:300px;
background-color:#fff;
border-left:150px solid #000;
border-radius:50%;
}
div::before{
content:'';
position:absolute;
top:0;
left:-75px;
width:30px;
height:30px;
background-color:#fff;
border:60px solid #000;
border-radius:50%;
}
div::after{
content:'';
position:absolute;
bottom:0;
left:-75px;
width:30px;
height:30px;
background-color:#000;
border:60px solid #fff;
border-radius:50%;
}
</style>
相关文章
- 01-08用css设计实现太极八卦图的效果
- 01-08用css3和canvas实现的蜂窝动画效果
- 01-08用CSS3实现对图片的放大效果
- 01-08用CSS实现加载的动画效果
- 01-08用css3和canvas实现的蜂窝动画效果
- 01-08用CSS实现Firefox 和IE 都支持的Alpha透明效果
- 01-08用CSS新属性实现特殊的图片显示效果