css是否可以绘制长度不同的垂直线？

Question

我可以使用此answer在背景中绘制垂直线。 并且这个答案画出相同长度的垂直线。

但是我想画以下几行。 （第5行比其他行长一点。）

目前，我以1px的宽度divs绘制了这些行。但是在检查了以上答案之后，我想知道是否只能通过CSS进行绘制。但仍不确定是否有可能。

期待任何建议。预先感谢。

Answer 1

您可以制作具有相同长度的背景，然后使用before或after创建高度更长的垂直线并将其放置在背景中间

div {
  width: 450px;
  height: 100px;
  position: relative;
  background-color: black;
  background-size: 10% 50%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, green 4px, transparent 1px, transparent);
  background-position: -2px center;
}
div:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 70px;
  background-color: green;
}

<div></div>

Answer 2

使用repeating-linear-gradient

.line {
  height: 50px;
  background:
   repeating-linear-gradient(to right, red   0 4px, transparent 4px 80px),
   repeating-linear-gradient(to right, green 0 4px, transparent 4px 20px) left/100% 70% no-repeat;

}

<div class="line"></div>

使用CSS变量轻松控制所有内容：

div.line {
  --d:20px; /* distance between lines */
  --l:4px;  /* length of line */
  --n:4;    /* how many small lines between the big one*/
  --h:70%;  /* Height of small lines*/
  --o:0;    /* When the big line will start */

  background:
    repeating-linear-gradient(to right, 
      red   0 var(--l), transparent var(--l) calc((var(--l) + var(--d))*(var(--n) + 1))) left calc(var(--o)*((var(--l) + var(--d)))) center no-repeat,
    repeating-linear-gradient(to right, 
      green 0 var(--l), transparent var(--l) calc(var(--l) + var(--d))) left/100% var(--h) no-repeat;
      
  margin:10px;
  height: 50px;
}

<div class="line"></div>
<div class="line" style="--n:10;--h:50%;--o:2"></div>
<div class="line" style="--n:2;--d:35px;--l:2px;--o:3"></div>
<div class="line" style="--n:8;--l:10px;--d:5px;--o:8;--h:90%;"></div>

Answer 3

.main_div
{
  position:absolute;
  width:90%;
  border:1px solid;
  height:50%;
  display:flex;
  justify-content:space-between;
}
.div_one
{
  position:relative;
  width:1%;
  border:1px solid;
  height:50%;
  background-color:black;
}
.div_five
{
  position:relative;
  width:1%;
  border:1px solid;
  height:60%;
  background-color:black;
}

<div class="main_div">
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_five"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
</div>