CSS 半圈

Question

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

Answer 1

编辑响应

<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 所以它们总是跨越。

CSS 半圈

CSS half circles

css

css-shapes