CSS: Ränder die kürzer als die Box sind

Design-technisch sieht sowas ja immer echt hübsch aus. Das aber umzusetzen ist erstmal nicht ganz so einfach, da es keine fertige Lösung gibt. Hier muss mal wieder ein eigenes Element mit :before und einer absoluten Position helfen.

Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.

Aber zurück zu den Rändern. Hier erstmal mit "absolute":

Links (80% Länge):

div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}


Links (80% Länge und unten + oben Abstand):

div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
User annonyme 2021-06-23 19:20

write comment:
Three + = 7

Ist es ein Problem bei "left" einen prozentualen Wert und bei "border-left" einen absoluten Wert anzugeben?
2021-06-24 14:29:58

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?