Html 背景上的平行对角线

我想在div的背景上画两条平行的对角线 请看我的桌子：

正文{
背景图像：url（“http://i.imgur.com/TnPgXl4.jpg");
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景重复：无重复；
填充：40px；
}
#桌子{
宽度：800px；
高度：300px；
背景色：透明；
边框：纯色1px白色；
}

---

您可以使用旋转的伪元素实现2条对角线。这两条线是绝对定位伪元素的顶部和底部边界：

正文{
背景图像：url（“http://i.imgur.com/TnPgXl4.jpg");
背景尺寸：封面；
背景重复：无重复；
填充：40px；
}
#桌子{
位置：相对位置；
宽度：800px；高度：300px；
背景色：透明；
边框：纯色1px白色；
溢出：隐藏；
}
#表：之前{
内容：''；
位置：绝对位置；
右侧：30%；底部：100%；
高度：20px；宽度：100%；
边框顶部：1px实心#fff；
边框底部：1px实心#fff；
变换原点：100%100%；
变换：旋转（-70度）；
}

---

您可以使用

:after

和

:before

伪元素和

正文{
背景图像：url（“http://www.planwallpaper.com/static/images/cool-background.jpg");
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景重复：无重复；
填充：40px；
}
#桌子{
宽度：70%；
高度：300px；
背景色：透明；
边框：纯色1px白色；
保证金：0自动；
位置：相对位置；
框大小：边框框；
}
#表：前，#表：后{
内容：“；
位置：绝对位置；
左：60%；
身高：102%；
左边框：1px纯白；
变换：旋转（10度）；
变换原点：顶部；
}
#表：之后{
左：65%；
}

---

一种替代wek tiki和Nenad Vracar答案的方法是使用

skewX（）

CSS转换

此解决方案不需要隐藏溢出边缘的任何内容，因此增加了一点灵活性

正文{
背景图像：url（“http://i.imgur.com/TnPgXl4.jpg");
背景尺寸：封面；
背景重复：无重复；
填充：40px；
}
#桌子{
位置：相对位置；
宽度：800px；
高度：300px；
背景色：透明；
边框：纯色1px白色；
}
#表：之前{
内容：''；
位置：绝对位置；
左：50%；
排名：0；
身高：100%；
宽度：20px；
右边框：1px实心#fff；
左边框：1px实心#fff；
变换原点：100%100%；
变换：skewX（-20度）；
}

Svg 您可以使用svg元素并将svg扩展到您的div

正文{
背景色：#222；
利润率：20px；
}
.集装箱{
宽度：100%；
高度：150像素；
边框：2倍纯白；
}
.容器svg{
宽度：100%；
身高：100%；
}

感谢您的精彩解答！非常感谢。这也很有帮助！哇，太棒了！此方法支持哪些浏览器？所有的2d转换都应该支持IE9（带有前缀）和所有现代浏览器。因此，如果我不做任何更改就使用这段代码，所有浏览器都支持这段代码？@WebR。当然，您总是希望自己通过运行测试来确认它。web tiki的答案将适用于，因为这也是一个2d转换。