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>

Answer 2

我在下面的代码段中为left-line编写了一些 CSS ，希望对您有所帮助。谢谢

.left-line {
    border-left: 1px solid #000;
    height: 815px;
    position: relative;
    left: 161px;
    transform: rotate(11deg);
    top: 181px;
}

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

.left-line {
    border-left: 1px solid #000;
    height: 815px;
    position: relative;
    left: 161px;
    transform: rotate(11deg);
    top: 181px;
}

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