Was ich versuche zu tun LOOKS einfach, aber ich kann nicht herausfinden, wie es geht.Zeichnen von gewinkelten Linien in CSS
Wie Sie in meinem Bild sehen können, gibt es ein paar rote Linien, die über den Boden gehen, dann biegen Sie nach oben in der Nähe der rechten Seite.
Gibt es eine Möglichkeit in CSS, eine Linie wie diese zu zeichnen?
Sie können mit Skew-Transformationen (transform: skew(Xdeg)) gewinkelten Linien in CSS erstellen. Unten ist ein Beispiel Schnipsel:
.shape {
height: 50px;
width: 200px;
border-bottom: 2px solid red;
border-right: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}<div class="shape"></div>Doppellinie mit einem über dem Inhaltsbereich und eine dahinter auch ein einzelnes Element mit (und ein paar pseudos) getan werden kann, wie im folgenden Code-Schnipsel:
.shape:before {
position: absolute;
bottom: -5px;
left: -5px;
content: '';
height: 50px;
width: 100%;
border-bottom: 3px solid red;
border-right: 4px solid red;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.shape:after {
position: absolute;
content: '';
bottom: -10px;
left: 0px;
height: 55px;
width: 100%;
border-bottom: 3px solid red;
border-right: 4px solid red;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
.shape {
position: relative;
height: 80px;
width: 400px;
background: whitesmoke;
}<div class="shape">
Some text that goes within the element...
</div>@SherwinFlight: Willkommen Kumpel. Ich habe auch ein Beispiel hinzugefügt, um das genaue Aussehen wie im Bild zu erhalten (mit nur 1 Element). Eine Sache, die beachtet werden muss, ist, dass, da wir eine Schräglage machen, die abgeschrägte Grenze ein wenig dünn ist, aber das kann überwunden werden, indem diese Grenze dicker als die andere gemacht wird. – Harry
Würdest du zufällig wissen, wie man die obere linke Ecke eines DIV "abschneidet"? Zum Beispiel, so dass es aussieht wie ein Stück Papier mit der oberen linken Ecke zurückgefaltet oder entfernt. –
Ist der Hintergrund einfarbig? Wenn ja, könnten Sie ein Dreieck verwenden und es oben platzieren. Wenn nicht, kann es immer noch erreicht werden, würde aber etwas zusätzliche Arbeit benötigen. – Harry
Möchten Sie nur abgewinkelte Linien (oder) eine Linie über dem Bild und eine Linie hinter wie im Screenshot? – Harry
Ich muss nur wissen, wie man Linien wie diese zeichnet. Ich kann es dann für die zweite Zeile duplizieren und die Z-Index-Werte festlegen, um den Überlappungseffekt zu erhalten. –
Würde [dies] (http://codepen.io/hari_shanx/pen/xGGPrL) ausreichen? – Harry