背景上的平行对角线

Question

我想在 div.
的背景上画 2 条平行对角线请看我的 table 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 条对角线。 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行之间的宽度由伪元素的高度控制
线条的粗细由 border-width
线条的倾斜度由旋转角度控制
div

overflow:hidden;

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

Answer 2

您可以使用 :after 和 :before 伪元素以及 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>

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>

背景上的平行对角线

Parallel diagonal lines on background

html

css

css-shapes

SVG