特殊的CSS3圆形,顶部和底部有切口

时间:2013-07-04 18:52:24

标签: css3 geometry

我想知道在CSS3中创建一个圆圈是否可行,然后切掉一些顶部和底部?

像这样: enter image description here

如果有人可以帮助我,那可能会很棒:D

  • TheYaXxE

1 个答案:

答案 0 :(得分:0)

好的,找到了办法。您需要做的是创建一个容器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>

这应该让你开始,现在根据你的需要调整它!