CSS半圆

我想知道是否有人能告诉我，是否有可能创建半个圆圈，将CSS连接在一起，并水平重复它们，使其看起来像一个花环。它们应该是两种不同的颜色。

---

多谢各位

编辑响应能力

div{
宽度：10%；
高度：0px；
垫底：2.5%；
背景色：红色；
浮动：左；
边框左下半径：100%200%；
边框右下半径：100%200%；
}
分区：第n个孩子（奇数）{
背景颜色：蓝色；
}
@介质（最大宽度：500px）{
div{
宽度：20%；
垫底：5%；
}
大分区{
显示：无；
}
}

对于完美的圆，只需将

高度

更改为

宽度

的一半即可

---

缩放大小的技巧是

填充底部

，它始终基于元素的

宽度

应用。当然，现在大小将是可变的，因此您必须添加任何合适的断点。然后它只是一个固定数量的元素，其

宽度
的百分比为
100/n
，因此它们总是可以跨越。
为响应性编辑



div{
宽度：10%；
高度：0px；
垫底：2.5%；
背景色：红色；
浮动：左；
边框左下半径：100%200%；
边框右下半径：100%200%；
}
分区：第n个孩子（奇数）{
背景颜色：蓝色；
}
@介质（最大宽度：500px）{
div{
宽度：20%；
垫底：5%；
}
大分区{
显示：无；
}
}

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

缩放大小的技巧是
填充底部
，它始终基于元素的
宽度
应用。当然，现在大小将是可变的，因此您必须添加任何合适的断点。然后，它只是一个固定数量的元素，其百分比
宽度
为
100/n
，因此它们总是能跨越。
太棒了！这正是我的意思！但问题是，这是为了一个反应迅速的主题，而且应该始终贯穿整个屏幕。你知道我是怎么做到的吗？太棒了！这正是我的意思！但问题是，这是为了一个反应迅速的主题，而且应该始终贯穿整个屏幕。你知道我怎样才能做到这一点吗？
<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;
    }
}