css - 是否可以从任意点开始通过 css 渐变绘制垂直线？

Question

我可以使用线性渐变或重复线性渐变在背景中画一条线，例如:

   background-color: linen;
   background-image: repeating-linear-gradient(90deg, black, black 1px, linen 1px, linen 100px);
   background-position: 100px;

我得到类似的东西:

我的问题是 - 从任意点而不是最顶部(或最底部)绘制此类线条的最佳方法是什么，比方说，我想从容器的中间到顶部绘制线条？

有可能吗？

到目前为止我已经尝试过什么:我已经检查过 background-size 或 background-position 是否可以改变这个但仍然没有运气。

Answer 1

因为 linear-gradient 创建了一个图像，我们可以把它当作一个图像，所以一个非常简单的方法是将它与 background-size/ 结合起来背景重复。

div {
  width: 700px;
  height: 100px;
  background-color: linen;
  background-size: 50px 50px;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, black 1px, transparent 1px, transparent),
                    linear-gradient(to right, black 1px, transparent 1px, transparent),
                    linear-gradient(60deg, transparent 25px, black 25px, transparent 26px, transparent);
  background-position: left 30px top,
                       left 5px bottom,
                       left 5px center;
}

<div></div>