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所以它们总是达到.