• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Geschwungene Linie

T

Tronjer

Senior HTML'ler
Mal eine Frage an die CSS-Spezialisten hier. Wie würdet ihr das hier konzeptionell umsetzen? Gemeint ist die gelbe Fläche mit der geschwungenen Linie auf weißem Hintergrund. Und jetzt nicht per SVG als background-image oder Canvas. Darauf bin ich auch gekommen. ;)


image.jpg
 
Werbung:
Wie würde ich das konzeptionell umsetzen?
Durch Schummeln, dass sich die Balken biegen (wortwörtlich :wink: ).

Es ist möglich einfache, gleichmäßige Muster mit Dingen wie radial-gradient zu erzeugen:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net
Aber es braucht eine Menge Schummeln! Wenn du damit okay bist, alles klar.

Du kannst das ganze automatisieren, indem du z.B. SCSS benutzt.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net
Verändere die Variablen wie du lustig bist.

Ich glaube, besser als das, wirst du es nicht hinbekommen.

Da es ja kein Bild ist, kannst du es zusätzlich durch transform auch noch rotieren und verändern wie du möchtest.

Am Ende sieht das ganze dann wohl so aus:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net

Im Prinzip sind es einfach nur 2 Ovale (durch radial-gradient gezeichnet), die durch korrekte Positionierung übereinander gestellt werden.
1576004041787.png

Bereiche, die durch eine andere Farbe versehen werden müssen, werden durch placeholder gefüllt.
1576004081433.png

Den Rest regelt z-index
1576004118238.png

Da dein unterer Kreis in deiner Vorlage ein wenig flacher ist, musst du die Breite des unteren Kreises ein wenig erhöhen. Das hier sollte es sein:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net
 
Zuletzt bearbeitet:
Werbung:
Sehr cool. An radial-gradient hatte ich nicht gedacht. Ich brauche es zwar noch responsive, weswegen position: absolute nicht optimal ist, aber das dürfte auch mit flex-layout funktionieren.

Danke.
 
Ich brauche das für eine Hybrid App, die nativ auf Smartphones, aber auch als PWA im Browser laufen soll. Dazu reicht es nicht aus, die üblichen 4 Breakpoints zu adressieren, sondern es müssen zusätzlich unterschiedlich große Viewports von Mobiltelefonen berücksichtigt werden.

Das Ganze benötige ich nicht nur in gelb, sondern auch in anderen Farben, und ehe ich jetzt die Designer mit der Erstellung von x Grafiken beschäftige, wollte ich erstmal nach einer CSS-Lösung suchen. SVG wäre ein Fallback, falls es per Styling nicht praktikabel sein solle.
 
Stimmt. Bei Einbindung von SVG als background-image ließe sich die Farbe zuweisen. Bei Pseudo-Elementen wahrscheinlich auch. Aber trotzdem muss der Kurvenverlauf für die Viewports angepasst werden. Ehe ich jetzt die Grafikerin anrufe, oder es im Illustrator selber zeichne, wollte ich es erstmal per Styling versuchen. Wenn man dabei mit vw arbeitet, könnte sogar ein Mixin für alle Breiten genügen.
 
Werbung:
Ich muss Sempervivum zustimmen. SVGs sind hier wohl die unkomplizierte Lösung, sofern die Pfade in naher Zukunft sich nicht ändern und ich sehe keinen Grund, warum diese nicht responsive sein sollen.

Tronjer schrieb:
Ich brauche es zwar noch responsive, weswegen position: absolute nicht optimal ist, aber das dürfte auch mit flex-layout funktionieren.
Zum Vergrößern anklicken....
Ja, ein Flexlayout würde gehen. Aber eine absolute Position ebenfalls. Der wrapper ist schließlich relativ Positioniert und somit können sich die Boxen ohnehin nur innerhalb des wrappers bewegen. Es ist also in sich ein geschlossenes System.
Es sollte vollständig responsive sein, zumindest wenn man SCSS benutzt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben