Parallel diagonal lines on background

Question

I want to draw 2 parallel diagonal lines on the background of my div.
Please see my table here:

body {
  background-image: url("http://i.imgur.com/TnPgXl4.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px;
}
#table {
  width: 800px;
  height: 300px;
  background-color: transparent;
  border: solid 1px white;
}

<div id="table"></div>

I want to achieve something like this:

Answer 1

You can achieve the 2 diagonal lines with a rotated pseudo element. The 2 lines are the top and bottom borders of the absolutely positioned pseudo element:

body {
  background-image: url("http://i.imgur.com/TnPgXl4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px;
}
#table {
  position: relative;
  width: 800px; height: 300px;
  background-color: transparent;
  border: solid 1px white;
  overflow: hidden;
}
#table:before {
  content: '';
  position: absolute;
  right: 30%; bottom: 100%;
  height: 20px; width: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform-origin: 100% 100%;
  transform: rotate(-70deg);
}

<div id="table"></div>

This is how this works :

• the width between the 2 lines is controled by the height of the pseudo element
• the thickness of the lines is controled by the border-width
• the slant of the lines is controled by the rotation angle
• the overflowing parts of the lines are hidden with the overflow:hidden; property on the div

Note that you need to add vendor prefixes to the transform and transform origin properties for browser support and you probably don't need the vendor prefixes on the background-size property:

• canIuse for background-size
• canIuse for 2D transforms

Answer 2

You can do this with :after and :before pseudo elemnts and trasform: rotate()

body {
  background-image: url("http://www.planwallpaper.com/static/images/cool-background.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   padding:40px;
}

#table {
  width: 70%;
  height: 300px;
  background-color: transparent;
  border: solid 1px white;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

#table:before, #table:after {
  content: "";
  position: absolute;
  left: 60%;
  height: 102%;
  border-left: 1px solid white;
  transform: rotate(10deg);
  transform-origin: top;
}

#table:after {
  left: 65%;
}

<div id="table"></div>