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;
    }
}

对于完美的圆，只需将高度更改为宽度的一半即可。

缩放大小的技巧是 padding-bottom，它始终根据元素的 width 应用。当然，现在大小将是可变的，因此您必须添加任何合适的断点。然后它只是固定数量的元素，width 的百分比为 100/n，因此它们总是跨越。