Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS

Rendern

Code - Nehmen Sie die blauen und gelben Ringe als Beispiel

 <div Klasse="Container">
    <div Klasse = "Ring blau"></div>
    <div Klasse="Ring gelb gelb1"></div>
    <div Klasse="Ring gelb gelb2"></div>
</div>

.Ring {
    Breite: 100px;
    Höhe: 100px;
    Randradius: 50 %;
    Position: absolut;
    Rahmenstil: durchgezogen;
    Rahmenbreite: 10px;
}

.Blau {
    Rahmenfarbe: #0180C3;
    oben: 0;
    links: 0;
    Z-Index: 0;
}

.Gelb {
    Rahmenfarbe: #FEB131;
    links: 70px;
    oben: 60px;
}

.gelb1 {
    /* Auf dem blauen Ring */
    Z-Index: 1;
    /* Kreis schneiden */
    Clip-Pfad: Polygon (0 0, 100 % 100 %, 0 100 %);
}


.gelb2 {
    /* Unter dem blauen Ring */
    z-Index: -1;
    Clip-Pfad: Polygon (0 0, 100 % 100 %, 100 % 0);
}

Der Verflechtungseffekt von Ringen erklärt

Nehmen wir als Beispiel die blauen und gelben Ringe:
Mit dem blauen Ring als Grundlage wird der gelbe Ring in zwei Teile geschnitten, wobei der erste Teil über dem blauen Ring liegt und der zweite Teil unter dem blauen Ring liegt.

Wenn Sie mit dem Zeichnen der blauen und gelben Ringe fertig sind, können Sie mit dem schwarzen Ring fortfahren. Diesmal wird der Maßstab zu einem gelben Ring und der schwarze Ring muss in zwei Teile geschnitten werden. Dann gibt es noch die grünen und roten Ringe, das gleiche Prinzip.

Vollständiger Code

https://jsbin.com/duhubis/edit?html,css,output

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung der fünf olympischen Ringe mit reinem HTML+CSS. Weitere relevante Inhalte zur Implementierung der fünf olympischen Ringe mit HTML+CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!