html - 背景上的平行对 Angular 线

Question

我想在我的 div 背景上绘制2 条平行对 Angular 线。
请看我的表格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>

我想实现这样的目标:

Answer 1

您可以使用旋转的伪元素实现 2 条对 Angular 线。这两行是绝对定位伪元素的上下边框:

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>

这是它的工作原理:

• 两行之间的宽度由伪元素的高度控制
• 线条的粗细由border-width控制
• 线条的倾斜度由旋转 Angular 控制
• 行的溢出部分通过 div 上的 overflow:hidden; 属性隐藏

请注意，您需要将供应商前缀添加到 transform和 transform origin浏览器支持的属性，您可能不需要 background-size 属性上的供应商前缀:

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