我想知道是否有人能告诉我是否有可能创建半个圆圈,将 CSS 相互连接起来并水平重复它们,使其看起来像一个花环。它们应该是两种不同的颜色。 非常感谢!
最佳答案
为响应而编辑
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
,因此它们总是跨越。
关于CSS半圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32234442/