CSS半圈

Question

我想知道是否有人可以告诉我是否有可能创建一个CSS相互连接的半圆并重复它们，使它看起来像一个花环。它们应该是两种不同的颜色。 非常感谢你！

Answer 1

编辑响应能力

http://jsfiddle.net/1v17e7uu/12/

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="big"></div>
<div class="big"></div>
<div class="big"></div>
<div class="big"></div>
<div class="big"></div>

div {
    width:10%;
    height:0px;
    padding-bottom:2.5%;
    background-color:red;
    float:left;
    border-bottom-left-radius:100% 200%;
    border-bottom-right-radius:100% 200%;
}
div:nth-child(odd) {
    background-color:blue;
}
@media (max-width:500px) {
    div {
        width:20%;
        padding-bottom:5%;
    }
    div.big {
        display:none;
    }
}

对于完美的圆圈，只需将height更改为width的一半。

缩放尺寸的技巧是padding-bottom，它总是根据元素width应用。当然现在尺寸将是可变的，因此您必须添加适当的断点。然后，它只是width 100/n的{​​{1}}个百分比的固定元素，因此它们始终可以达到。