Vertisan Vertisan - 4 months ago 11
CSS Question

Slanting multiple lines in CSS

Is it possible to do somethink like this in CSS? I mean, this lines:
http://image.prntscr.com/image/54a38b236b954a16af9766747931ca61.png

Answer

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">
  <svg>
    <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%" />
  </svg>
</div>

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;
}

https://jsbin.com/zokedi/4/edit?html,css,output