Parallel diagonal lines on the background.

Question

I want to draw two parallel diagonal lines against the background of my div .
See the 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 reach 2 diagonal lines with a rotating pseudo-element. 2 lines - the upper and lower boundaries of an 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> 

Here's how it works:

• the width between two lines is controlled by the height of the pseudo-element
• The thickness of the lines is controlled by the width of the border.
• the slope of the lines is controlled by the angle of rotation
• overflowed parts of rows are hidden with the overflow:hidden; property overflow:hidden; on div

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

• canIuse for background size
• canIuse for two-dimensional transformations

Answer 2

You can do this with :after and :before pseudo-elements 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 the answers from wek-tiki and Nenad Vracar would be to use the skewX() CSS transform.

This solution does not require you to hide everything 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 can use the svg element and move 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>