在背景上的平行对角线

Question

我想在div 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>

我希望达到以下目的：

Answer 1

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

＆＃13;

＆＃13;

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);
}

＆＃13;

<div id="table"></div>

＆＃13;

＆＃13;

＆＃13;

这是如何工作的：

• 两条线之间的宽度由伪元素的高度
控制
• 线条的粗细由边框宽度
控制
• 线条的倾斜由旋转角度控制
• 这些行的溢出部分隐藏在div
上的overflow:hidden;属性中

请注意，您需要在transform和transform origin属性中添加供应商前缀以获得浏览器支持，并且您可能不需要background-size属性上的供应商前缀：< / p>

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

Answer 2

您可以使用:after和:before伪元素和trasform: rotate()

执行此操作

＆＃13;

＆＃13;

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%;
}

＆＃13;

<div id="table"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

wek-tiki和Nenad 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>

Answer 4

Svg为

您可以使用svg元素并将svg跨越到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>