我可以使用这个 answer 在背景中绘制垂直线. 这个答案绘制了相同长度的垂直线。
目前,我用 1px 宽度 divs
绘制了这些线条。但是在检查了上面的答案之后,我想知道我是否只能通过 css 绘制。但仍然不确定这是否可能。
期待任何建议。提前致谢。
最佳答案
这是使用 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>
关于html - 是否可以使用 css 绘制具有不同长度的垂直线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58741332/