Kreis mit CSS; 4-Farben Yin Yang Symbol

Heinz · 20. August 2013

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]

Code

#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

lauras · 21. August 2013

du brauchst auf jeden Fall mehr als einen div, allein schon weil du vier Farben hast
ich könnte mir vorstellen, dass man es mit ein bisschen tricksen mit zweien schafft, aber einfacher ist sicher vier oder mehr zu nehmen.
die Idee die du hattest hört sich doch gar nicht so schlecht an.
probier es doch einfach aus

Roland · 21. August 2013

denke auch das es leichter ist, es in mehrere divs zu machen dann siet man was jedes einzelne macht.
z.b. kann man den code oben so aufteilen.

HTML

<div id="yin-yang">
	<div id="yin-yang-before"></div>
	<div id="yin-yang-after"></div>
<div>




<style>
#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 {
	position: absolute;
	top: 50%;
	left: 0;
	background: #eee;
	border: 18px solid red;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}




#yin-yang-after {
	position: absolute;
	top: 50%;
	left: 50%;
	background: red;
	border: 18px solid #eee;
	border-radius:100%;
	width: 12px;
	height: 12px;
}
</style>

Alles anzeigen

am schwersten zu verstehen finde ich #yin-yang.
die andren sind relativ leicht nachvolzibar einfach nur ein rundes div mit rahmen (wobei der ramen dicker ist als der eigentliche inhalt).

Hinweis:
Das Beispiel siet in Opera12.16 und IE10 nicht besonders gut aus.
Im IE9 geht es garnicht.

Wenn du magst kannst du dir mal SVG Grafiken anschauen das funst dann auch im IE9.
sihe: svg browsersupport und inline-svg browsersupport

Ralph_68 · 4. September 2013

Ich hab das mal mit Viertelkreisen probiert. 6 div's Viertel Kreis oben links (ol) (or) (ul)(ur) und die zwei Kreise mittig nebeneinander (li) (re) - Firefox prima, IE hat leichte Ränder und ca. 10px Versatz der mittleren Kreise bei absoluter Positionierung. Chrome hat nur 10px Versatz.
Gruß Ralph

css

#ying-yang
{
width:400px;
height:400px;
margin:25px 0px 0px 25px;
background-color: #cccccc;
}

#yin-yang-ol
{
width: 200px;
height: 200px;
background-color: #00FF00;
-o-border-radius: 200px 0px 0px 0px;
-mo-border-radius: 200px 0px 0px 0px;
-webkit-border-radius: 200px 0px 0px 0px;
border-radius: 200px 0px 0px 0px;
float: left;
}
#yin-yang-or
{
width: 200px;
height: 200px;
background-color: #0000FF;
-o-border-radius: 0px 200px 0px 0px;
-mo-border-radius: 0px 200px 0px 0px;
-webkit-border-radius: 0px 200px 0px 0px;
border-radius: 0px 200px 0px 0px;
margin-left: 200px;
}
#yin-yang-ul
{
clear: left;
width: 200px;
height: 200px;
background-color: #FFFF00;
-o-border-radius: 0px 0px 0px 200px;
-mo-border-radius: 0px 0px 0px 200px;
-webkit-border-radius: 0px 0px 0px 200px;
border-radius: 0px 0px 0px 200px;
float: left;
}
#yin-yang-ur
{
width: 200px;
height: 200px;
background-color: #FF0000;
-o-border-radius: 0px 0px 200px 0px;
-mo-border-radius: 0px 0px 200px 0px;
-webkit-border-radius: 0px 0px 200px 0px;
border-radius: 0px 0px 200px 0px;
margin-left: 200px;
}
#yin-yang-li
{
width: 50px;
height: 50px;
background-color: #00FF00;
-o-border-radius: 100%;
-mo-border-radius: 100%;
-webkitborder-radius: 100%;
border-radius: 100%;
border: 75px solid yellow;
top:50%;
left:50%;
position: absolute;
margin-top: -325px;
margin-left: -815px;
}
#yin-yang-re
{
width: 50px;
height: 50px;
background-color: #FF0000;
-o-border-radius: 100%;
-mo-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 75px solid #0000FF;
top:50%;
left:50%;
position: absolute;
margin-top: -325px;
margin-left: -615px;
}

Kreis mit CSS; 4-Farben Yin Yang Symbol

Jetzt mitmachen!

Teilen