HTML – 背景上的平行对角线

我想在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;
}

我希望实现这样的目标：

最佳答案

您可以使用旋转的伪元素实现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);
}

这是如何工作的：

> 2行之间的宽度由伪元素的高度控制
>线条的粗细由边框宽度控制
>线的倾斜由旋转角度控制
>溢出的部分隐藏着溢出：隐藏; div上的财产

请注意,您需要将供应商前缀添加到transform和transform origin属性以获得浏览器支持,并且您可能不需要background-size属性上的供应商前缀：

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