Vertisan Vertisan - 3 months ago 8x
CSS Question

Slanting multiple lines in CSS

Is it possible to do somethink like this in CSS? I mean, this lines:


Sorry I'm not answering your question exactly, but you might find SVG to be the better choice; it's made for this sort of stuff and is dead easy to work with.

To set an SVG as a background that covers the parent div...

The markup is like this:

<div class="background">
    <line x1="60%" y1="0" x2="40%" y2="100%" />
    <line x1="70%" y1="0" x2="50%" y2="100%" />
    <line x1="80%" y1="0" x2="60%" y2="100%" />
    <line x1="90%" y1="0" x2="70%" y2="100%" />
    <line x1="100%" y1="0" x2="80%" y2="100%" />
    <line x1="110%" y1="0" x2="90%" y2="100%" />

And the CSS is like this:

.background {
  position: relative;
  width: 300px;
  height: 400px;
  border: 2px dashed black;
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #d7322c;
line {
  stroke-width: 2;
  stroke: #dc4e49;