Hallo,
mit CSS kann man ja geometrische Figuren erstellen. Es ist doch damit bestimmt auch möglich ein solches 4-Farben YinYang Symbol zu kreieren:
[Blockierte Grafik: http://abload.de/img/planung2gzzdj.jpg]
Im Netz habe ich dieses YinYang CSS Symbol gefunden:
[Blockierte Grafik: http://abload.de/img/yinyangttutn.jpg]
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
Alles anzeigen
Das überfordert mich ein bisschen gerade
Wie würde man soetwas planen? Ich habe mir schon überlegt etwa mit vier verschiedenen <div>s vier Halbkreise mit den vier Farben zu erstellen und diese dann zu dem großen Kreis zusammenzuschieben. Dann zwei kleine Halbkreise mit zwei neuen divs in Gelb und Blau und diese dann wieder versuchen an die richtige stelle zu schieben.
Geht das auch irgendwie einfacher mit nur einem div so wie in dem Beispiel? Ich glaube da fehlt es mir einfach an Erfahrung?
Vielleicht kann mir ja jemand helfen
lg, heinz