Erstellen Sie diagonale Linie über der Box mit Hintergrundfarbe in CSS

Question

Ich möchte eine diagonale Linie auf der Box, die Hintergrundfarbe grün hat, wie im Beispiel unter gezeigt. Welches CSS soll ich verwenden?

Diagonal line on top of green background color

Ich schaffte es mit diesem Code zu tun:

.quote { 
    background: #41ade5; 
    color: #fff; 
    position: relative; 
    z-index: 1; 
} 
.quote:before { 
    background: inherit; 
    bottom: 0 !important; 
    content: '' !important; 
    display: block !important; 
    height: 50% !important; 
    left: 0 !important; 
    position: absolute !important; 
    right: 0 !important; 
    transform: skewY(1.5deg) !important; 
    transform-origin: 100% 0 !important; 
    z-index: -1 !important; 
    top: 0; 
}` 

Aber dann die diagonale Linie viele Kanten bekam, und nicht scharf. Gezeigt im Bild unten:

Diagonal line with edges

Hat jemand einen guten CSS-Tipps haben für eine diagonale Linie zu machen, die mehr sauber ist?

Answer 1

<div style="width: 300px; height: 300px; border: solid 1px black; position: relative; overflow: hidden;"> 
 
    <div style="width: 400px; height: 100px; background: green; margin-bottom: 200px; transform: rotate(174deg); position: absolute; left: -77px; top: -15px; "> 
 

 
    </div> 
 
</div>

Hast du das zu bedeuten?

Answer 2

Sieht dies besser für Sie aus. Ich habe gerade hinzugefügt -webkit-backface-visibility: hidden;, die bekannt ist, um Jaggies zu reduzieren. Ich denke jedoch, dass diese Lösung nur dann funktioniert, wenn kein Anti-Aliasing angewendet wird. Es kann sein, dass dies so gut wie das Browser-Anti-Aliasing wird.

body { 
 
background:#000; 
 
} 
 
.quote { 
 
    background: #41ade5; 
 
    color: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    height:100px; 
 
    margin-top:50px; 
 
} 
 
.quote:before { 
 
    background: inherit; 
 
    bottom: 0; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    transform: rotate(1.5deg); 
 
    transform-origin: 100% 0; 
 
    z-index: -1; 
 
    top: 0; 
 
    -webkit-backface-visibility: hidden; 
 
}

<div class="quote"></div>

Answer 3

Wenn Sie ein Bild zeichnen wird es dauern, Kanten- und unscharfe aber CSS nicht.

Unten ist Ihr CSS-Code und es funktioniert gut.

.quote { 
 
    background: #41ade5; 
 
    color: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.quote:before { 
 
    background: black; 
 
    bottom: 0 !important; 
 
    content: '' !important; 
 
    display: block !important; 
 
    height: 50% !important; 
 
    left: 0 !important; 
 
    position: absolute !important; 
 
    right: 0 !important; 
 
    transform: skewY(1.5deg) !important; 
 
    transform-origin: 100% 0 !important; 
 
    z-index: -1 !important; 
 
    top: 0; 
 
}

<div class="quote"></div>