我想繪製我的div背景上的2條平行對角線。
請看看我的表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>

我要實現的是這樣的：

Div with 2 diagonal lines on background

來源

2016-01-26 Web R

可以實現2對角線與一個旋轉僞元素。的2行是絕對定位僞元件的頂部和底部邊界：

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>

這是如何工作的：

2線之間的寬度是由controled僞元素的高度
線的粗細由邊框寬度控制
上的行的傾斜是通過旋轉角度
線四溢的部分被隱藏與股利的overflow:hidden;財產

請注意，您需要供應商前綴添加到transform和transform origin性能controled對瀏覽器的支持，你可能並不需要對background-size屬性供應商前綴：

來源

2016-01-26 09:48:41

感謝偉大的和擴展的答案！ –

您可以:after和:before僞elemnts做到這一點，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>

來源

2016-01-26 09:48:42

謝謝！這也有幫助！ –

的替代WEK - 蒂基和內納德Vracar區的答案是使用skewX() CSS變換。

該解決方案不會要求您隱藏任何溢出邊緣的東西，因此會增加一點靈活性。

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>

來源

2016-01-26 10:11:00 Stewartside

太好了！這個方法支持哪些瀏覽器？ –

http://caniuse.com/#feat=transforms2d所有2d變換都應該支持IE9（帶前綴）和所有現代瀏覽器。 – Stewartside

因此，如果我將完全使用此代碼而不做任何更改，這一切都支持所有瀏覽器？ –

Svg爲

你可以使用SVG元素和跨越SVG到您的股利。

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>

來源

2016-01-26 10:19:03 Persijn

背景上的平行對角線

回答

Svg爲

相關問題