Diagonale mit CSS + javascript ohne SVG

[Gunnar Bittersmann]

@@Matthias Apsel

linear-gradient könnte etwas für dich sein.

Eric Meyer schrieb kürzlich drüber: Generating Wireframe Boxes with CSS and HTML5.

Wie ich dort gerade in meinem Kommentar (der zur Zeit noch freigeschaltet werden muss, deshalb am Ende angefügt) schrieb, sind Gradienten aber dafür nicht gedacht. Browser machen beim Rendern kein Anti-Aliasing; schräge Linien sehen demzufolge pixelig aus.

Die Lösung ist SVG; siehe Codepen Wireframe box with SVG.

Dass hier im Titel „+ javascript ohne SVG“ steht, habe ich geflissentlich überlesen. Es ist schlich und einfach unsinnig, das brauchbare Werkzeug aus dem Werkzeugkasten zu werfen und stattdessen JavaScript dort hineinzulegen, wo es überhaupt gar nichts zu suchen hat.

LLAP 🖖

Mein Kommentar zu Eric Meyers Artikel:

Browsers don’t apply anti-aliasing to gradients. (Don’t blame them. Gradients are intended for smooth color transitions, not for edges.) Hence the diagonal lines will look pixelated.

Instead of linear-gradients, you might want to use SVG as background image. You would need to set preserveAspectRatio="none" on the svg element and vector-effect="non-scaling-stroke" on the line element (or path in case you would want to use that instead). See codepen Wireframe box with SVG.

(According to the spec, the data URL needs to be percent-encoded. Some browsers would display the SVG background even when not percent-encoded, but not all browsers.)

The downside is that you can’t use the custom property --wire for the stroke color of the SVG background. Or is there a way, other than using JavaScript?