Linee diagonali parallele su sfondo

Question

Voglio disegnare 2 linee diagonali parallele sullo sfondo del mio div.
Si prega di vedere il mio tavolo 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>

voglio ottenere qualcosa di simile:

Answer 1

è possibile ottenere la 2 linee diagonali con a rotazione pseudo elemento. Le 2 linee sono i bordi superiore e inferiore dell'elemento pseudo posizionamento assoluto:

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>

Questo è come funziona:

• la larghezza tra le 2 linee è controllata da l'altezza dello pseudo elemento
• lo spessore delle linee è controllato dalla larghezza del bordo
• l'inclinazione delle linee è controllata dal l'angolo di rotazione
• le parti traboccanti delle linee sono nascosti con la proprietà overflow:hidden; sul div

Si noti che è necessario aggiungere prefissi vendor alle proprietà transform e transform origin per il supporto del browser e che probabilmente non avete bisogno i prefissi vendor sulla proprietà background-size:

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

Answer 2

Si può fare questo con :after e :before pseudo elemnts e 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

Un'alternativa a wek-tiki e le risposte di Nenad Vracar sarebbe quella di utilizzare il CSS skewX() trasformare.

Questa soluzione non richiede di nascondere tutto ciò che trabocca dal bordo e quindi aggiunge un po 'più di flessibilità.

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

Si potrebbe utilizzare un elemento SVG e coprire l'SVG al 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>