Responsive CSS Circles

Question

Goal:

Responsive CSS circles that:

1. Scale with equal radius.
2. Radius can be calculated by percent.
3. Radius can be con

Answer 1

I know this solution differs quite a bit from what has been suggested here but I still thought it would be worth putting it up.

I used an image as a mask to create the circle and took advantage of the fact that when padding is specified as a percentage it is calculated based on the width of its parent element rather than the height. This enabled me to create a perfect square.

Demonstration of circles proportionally resizing here

HTML code

CSS code

.container {
    position: relative;
    float: left;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #bbb;

}

.circle { 
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: auto;
    z-index: 1;
}

@media (max-width: 320px) {
    .container { width: 100%; padding-bottom: 100%; }
}

@media (min-width: 321px) and (max-width: 800px) {
    .container { width: 50%; padding-bottom: 50%; }
}

@media (min-width: 801px) {
    .container { width: 25%; padding-bottom: 25%; }
}

Demonstration of the above circles sub-divided into sections as per your question here