CSS如何连接线

Question

我必须在 <div> 中用 CSS 创建水平线元素，现在我想用另一条线(手工绘制的线)加入它们，有什么想法吗？下面是我正在做的事情的图片:

.canvas {
  top: 1px;
  left: 1px;
  background-color: #CCC;
  width: 1000px;
  height: 1000px;
}

.top-line {
  top: 100px;
  left: 256px;
  position: absolute;
  border-top: 1px solid #000;
  height: 1px;
  width: 488px;
}

.bottom-line {
  top: 900px;
  left: 100px;
  position: absolute;
  border-top: 1px solid #000;
  height: 1px;
  width: 800px;
}

<div class="canvas">
  <div class="top-line"></div>
  <div class="left-line"></div>
  <div class="right-line"></div>
  <div class="bottom-line"></div>
</div>

Answer 1

你可以考虑一个元素和一些转换来直观地实现你想要的:

.box {
  width:300px;
  height:200px;
  border:1px solid;
  border-right:none; /*remove this if you want the right line too*/
  transform:perspective(30px) rotateX(5deg);
  transform-origin:bottom center;
}

body {
  background:pink;
}

<div class="box">
</div>

另一种考虑倾斜变换的想法:

.box {
  width:300px;
  height:200px;
  border-bottom:1px solid;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:50%;
  border-top:1px solid;
}
.box:before {
  border-left:1px solid;
  transform-origin:bottom left;
  left:0;
  transform:skew(-10deg);
}
.box:after {
  /*border-right:1px solid; add this for the right line */
  transform-origin:bottom right;
  right:0;
  transform:skew(10deg);
}

body {
  background:pink;
}

<div class="box">
</div>