Search code examples
csscss-shapes

CSS half circles

I was wondering if anyone could tell me if it is possible to create half circles with CSS attached to each other and repeat them horizontally so it looks like a garland. They should be two different colors. Thank you very much!

Solution

  • Edit for responsiveness

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

    For perfect circles just change the height's to be half the width's.

    The trick to scale the size is the padding-bottom which is always applied based on the element's width. Of course now the sizes will be variable so you would have to add whatever breakpoints are appropriate. Then it's just a fixed number of elements with percentage width's of 100/n so they always reach across.