css - 带有切割顶部和底部的特殊 CSS3 圆

Question

我想知道是否可以在 CSS3 中创建一个圆，然后在顶部和底部切掉一点？

像这样:

如果有人能帮我解决这个问题就太好了:D

• TheYaXxE

Answer 1

好的，找到方法了。您需要做的是创建一个容器 div，然后在其中放置圆圈。使容器小于圆，并 overflow hidden 。这是一个 JS fiddle :

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>

这应该让你开始了，现在根据你的需要摆弄它!