我想知道是否有可能在CSS3中创建一个圆,然后在顶部和底部切割一些?
像这样:
如果有人可以帮助我,这可能很棒:DO
他们看

最佳答案

好的,找到了办法。您需要做的是创建一个容器div,然后在其中放入圆圈。使容器小于圆形,然后隐藏溢出物。这是一个JS小提琴:

http://jsfiddle.net/CrD3q/1/

CSS:

.circle {
    position: relative;
    top: -6px;
    width: 108px;
    height: 108px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.container{
    height: 96px;
    width: 108px;
    overflow:hidden;
}


HTML:

<div class="container">
    <div class="circle"></div>
</div>


这应该可以帮助您入门,现在可以根据自己的需要进行调整!

关于css - 顶部和底部均切开的特殊CSS3圈,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17476649/

10-08 22:14
查看更多