Wie bekommt man Wellenformen hin?

Guten Tag,

Ich habe mir ein Design für eine Webseite überlegt und wollte fragen ob es möglich ist solche Wellenformen(siehe Bild) in HTML/CSS zu machen.

Nach einiger Recherche kam ich lediglich zum "border"-Befehl. Wie ich den anwenden müsste für wellen ist mir jedoch ein Rätsel.

Ich bedanke mich bei allen die Helfen können. Euch noch einen schönen Tag,

GusionPlays

Answer 1

[MrMassachusetts]

1. Möglichkeit: Klicke mit dem Rechten Mauszeiger auf das Element (Auf der Website) und dann steht dort: "Untersuchen". Dann wird dir der Quellcode angezeigt.

Ich denke, dass es einfach ein Bild ist (mit Photoshop etc.) gemacht, und dann eingefügt.

Comments

[GusionPlays]

Hallo MrMassachusetts,

Dieses Bild ist aus Photoshop und von mir erstellt. Das ich Objekte untersuchen kann ist mir bewusst. 

Über die Alternative habe ich auch schon nachgedacht und momentan scheint es die einzige Lösung zu sein.

Answer 2

[RedKungFuMastr]

Mit ner einfachen Border kriegt man das nicht hin... Du musst bedenken, dass du mit dem Attribut border-radius nur die Ecken einer Box abrunden kannst. Demnach kannst du 2 Halbkreise machen, aber was machst du mit dem konkaven Teil? Später kommt dann noch der Schatten dazu und das bringt erst einmal Probleme...
Du kannst es mit SVG versuchen, aber damit habe ich mich nicht groß auseinandergesetzt.

Am besten machst du einfach ein transparentes PNG daraus... die Mediengestalter auf meiner Arbeit machen das auch nicht anders...

Answer 3

[abbrechen]

Ich sehe dafür drei javascriptlose Möglichkeiten.

1. Ein Bild, würde auch mit einem gehen, das du dann einfach drehst.

2. svg, was praktisch ein Bild ist, nur halt gecodet. Wenn du dir den Aufwand machen möchtest, ansonsten kannst du auch eine Graphik als svg abspeichern und dann bearbeiten. Da du aber keine Animation machen möchtest, könntest du auch gleich ein normales Bild nehmen.

3. Mit sass

Du könntest eine Funktion aufstellen, die eine Vielzahl in Wellenform anordnet. Diese lässt du dann so schnell bewegen, dass es nach einer stillen Linie aussieht. Ich hatte da mal vor einiger Zeit was ähnliches gemacht. Sind dann natürlich sehr viele divs. Besser wäre es, dafür box-shadows zu nehmen, dann kannst du das Ganze auch mit einem einzelnen div verwirklichen. Hier ist mal pen: https://codepen.io/phng/pen/egBpKg