Frage von JoniGo, 35

Box-Element diagonal auf html-Seite?

Hallo,

habe eine spezielle Frage. Ich möchte ein längliches, rechteckiges Grafik-Element in eine div-Box platzieren, die 100vw breit ist 100vh hoch ist (also das komplette Fenster ausfüllt). Und zwar schräg auf der Diagonale, sodass auch beim Verändern der Fenstergröße und auch auf Hochkant-Endgeräten immer die komplette Grafik sichtbar ist (siehe Skizze). Dazu müsste sich der Winkel und die Größe der Grafik verändern.

Ich bin Grafikdesigner und kein Code-Spezialist, kenne mich allein mit HTML und CSS ein wenig aus. Habe schon überlegt, dass mit CSS und calc(), zu lösen, dafür müsste man aber damit mit Wurzeln rechnen können (für den Winkel)…

Wer kann mir helfen?

Freue mich auf Eure Antworten!

Herzlich dankt

Jonigo

Antwort
von Steffile, 24

Klar, das geht mit css und svg:

https://codepen.io/ClementParis016/pen/xwXzBR

Kommentar von JoniGo ,

Vielen Dank! Und kann ich die Linie z. B. auch irgendwie durch ein längliches png-Bild ersetzen?

Kommentar von JoniGo ,

… Und leider funktioniert das nicht in Firefox :(

Trotzdem vielen Dank!

Kommentar von Steffile ,

Hi, ein png Bild geht nicht denke ich. Und fuer svg in Firefox gibt es bestimmt einen Hack, google einfach :)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten