Responsive CSS Circles

Jahrzehnte bestand das Internet fast ausschließlich aus rechteckigen Formen. Dank CSS3 ist damit seit einigen Jahren Schluss - Regeln wie border-radius und transform ermöglichen schier endlosen Gestaltungsspielraum, ohne Megabyteweise Grafiken nachladen zu müssen.

Ein div zu einem Kreis zu machen geht z.B. ganz einfach:

div.circle {
    width: 100px;
    height: 100px;
    background-color: cyan;
    border-radius: 50px;
}

Wenn die exakte Größe des Elements bekannt ist, ist hiermit schon alles erledigt. Im Zeitalter zahlloser Mobilgeräte genießen wir diesen Luxus jedoch in der Regel nicht - unterschiedliche Devicebreiten lassen uns mit solch statischen Zahlen schnell an unsere Grenzen stoßen.

Schritt 1: border-radius in % angeben

Die CSS-Regel border-radius unterstützt wie die meisten CSS-Regeln auch eine %-Angabe.

div.circle {
    width: 100%;
    height: 100px;
    background-color: cyan;
    border-radius: 50%;
}

Wenn wir darüber hinaus width auf 100% setzen, ist unser Kreis direkt "responsive" - oder auch nicht. was wir zu Gesicht bekommen ist lediglich ein hässliches Oval. Wir müssen unserem Element noch beibringen, dass dessen Höhe immer dessen Breite entsprechen soll.

Schritt 2: Elternelement mit festem Seitenverhältnis

Wir müssen nun zuerst unser HTML-Markup etwas anpassen:

<div class="column">

    <div class="circle-outer">
        <div class="circle">
            ...
        </div>
    </div>

</div>

Das div.column dient nur der Veranschaulichung eines die Breite vorgebenden Elternelements. Sollten hier weitere Abstände benötigt werden, ist es wichtig, dass diese auf dem Parent definiert werden, und nicht auf div.circle-outer - sonst funktioniert unser Trick nicht korrekt.

Wir fügen nun folgendes CSS hinzu:

div.circle-outer {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}

Wir machen uns dabei zu nutze, dass das Bezugssystem für die Größenberechnung auch bei vertikalen Paddings die Breite des Elements ist. Das Element hat nun eine Innenhöhe von 0 und eine Außenhöhe, die exakt der Breite des Elements entspricht.

Schritt 3: Absolut positionierter Kreis im Elternelement

Um nun unseren Kreis korrekt anzuzeigen, ändern wir dessen CSS folgendermaßen ab:

div.circle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: cyan;
    border-radius: 50%;
}

Et voilà - wir haben einen perfekt responsiven Kreis erstellt. Warum? Bei absoluter Positionierung ist das Bezugssystem nicht die Innengröße des entsprechenden Elternelements, sondern die Außengröße, also inklusive Padding.

Diese Technik in Action als jsfiddle

Andere Anwendungsfälle

Diese Technik kann für alle Container angewendet werden, deren Seitenverhältnis fix definiert ist, also z.B. auch beim Einbinden von Videos als iframe - es muss leidglich die richtige Prozentzahl für das padding-bottom errechnet werden - für ein Video im 16:9-Format wären dies 56.25%.

Populäres Beispiel sind z.B. die .embed-responsive Klassen des Frontendframeworks Bootstrap.