CODEWITHSUNDEEP
csscss-shapes
user5269943
user5269943

Reputation:

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!

Upvotes: 0

Views: 900

Answers (1)

ryachza
ryachza

Reputation: 4540

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.

Upvotes: 5

Related Questions