Parallel diagonal lines on background - html

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>

Answer 3

An alternative to wek-tiki and Nenad Vracar's answers would be to use the skewX() CSS transform.
This solution won't require you to hide anything that overflows the edge and therefore adds a little more flexibility.
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;
}
#table:before {
content: '';
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 20px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform-origin: 100% 100%;
transform: skewX(-20deg);
}
<div id="table"></div>

Answer 4

Svg
You could use an svg element and span the svg to your div.
body {
background-color: #222;
margin: 20px;
}
.container {
width: 100%;
height: 150px;
border: 2px solid white;
}
.container svg {
width: 100%;
height: 100%;
}
<div class="container">
<svg viewBox="0 0 100 100">
<line stroke="white" x1="47" x2="57" y1="100" y2="0" />
<line stroke="white" x1="57" x2="67" y1="100" y2="0" />
</svg>
</div>