CSS Regenbogen

ikosaeder

Teekannen-Agnostiker
Hallo,
ich bräuchte mal Hilfe bei einem kleinen Problem mit 2D Transformation.
Ich möchte einen Regenbogen mit Sonne in CSS erstellen. Den Regenbogen und die Sonne haben ich schon
http://jsfiddle.net/8DbPC/
Ich brauche aber noch einen sauberen Weg um die Sonnenstrahlen zu erzeugen. Drehen und positionieren per Hand ist etwas mühselig, aber mir fällt gerade nichts dazu ein.
Vielleicht weiß jemand von euch einen Rat.
 
Es geht mir im Moment mehr um die Positionierung. Aber mask ist cool, danke für den Tipp.
Ich habe leider/ zum Glück kein Chrome.
 
Bezüglich mask dachte ich an ein gelbes Rechteck, welches du mit mask in Strahlen verwandelst. Sprich du lässt nur Strahlen durchscheinen und alles andere wird versteckt.
 
Dank
CSS:
transfrom-origin
bin ich ein gutes Stück weiter.
http://jsfiddle.net/ikosaeder/6FCCg/4/
Ich habe einige Elemente transparent gemacht, damit man sieht was ich da versucht habe.
Leider ist das Erzeugen der Strahlen von Hand sehr mühsam. Ich möchte aber keine CSS-Preprozessor wie Sass einsetzen sondern bei reinem CSS bleiben.
 
Nette Wolke ;)

Die Strahlen sind aber noch nicht richtig positioniert, oder habe ich hier einen Anzeigefehler (in IE 11, Firefox und Opera)?
 
Was meinst du mit nicht richtig positioniert? Die Position ist (zumindest bei mir im Firefox), so wie ich es eingegeben habe. Allerdings bin ich selbst damit noch nicht zufrieden. Es kann sein, das der Ursprung noch nicht genau in der Mitte der Sonne liegt. Müsste ich noch mal prüfen.
Durch die Verschiebung des Ursprungs in die Mitte kann man sie auf jeden Fall besser rotieren und gleichzeitig verschieben. Damit sie gut aussehen muss man aber wohl mindestens alle 10 Grad also insgesamt 18 Strahlen erzeugen, von denen ein Teil von anderen Elementen verdeckt wird. Nicht sehr elegant.

So sieht es aktuell aus. Ich habe bislang 12 Strahlen. Das es Lücken gibt ist Absicht. Die Strahlen in den Lücken würden sowieso erst ausserhalb des div's den Rand der Sonne verlassen.
cssRainbow.png
 
Zuletzt bearbeitet:
So wie auf deinem Bild sieht es bei mir auch aus. Ich hatte vergessen, dass du die Sonne und andere Dinge absichtlich leicht transparent gemacht hattest ;)
 
Zurück