html - 是否可以使用css绘制具有不同长度的垂直线？

Question

我可以使用这个答案在背景中绘制垂直线。这个答案绘制了相同长度的垂直线。

但我想画出以下几行。（第 5 行比其他行稍长。）

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

期待任何建议。提前致谢。

标签： htmlcss

Answer 1

这是一个更简单的想法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>