是否可以通过从任意点开始的CSS渐变绘制垂直线? [英] Is it possible to draw vertical lines via css gradients starting from arbitrary point?

问题描述

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

I can draw a line in background using linear-gradient or repeating-linear-gradient, for instance:

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

我会得到类似的东西:

I'l get something like:

我的问题是-从任意点而不是从顶部(或底部)画线的最佳方法是什么?例如，我想从容器的中间到顶部画线?

My question would be - what will be the best way to draw such lines from some arbitrary point, not from the very top (or very bottom), say, I want to draw line from the middle of container to the top?

有可能吗?

到目前为止，我已经尝试了什么:我检查了背景大小或背景位置是否可以更改此设置，但仍然没有运气.

What have I've tried so far: I've checked wether background-size or background-position can change this but still no luck.

推荐答案

随着linear-gradient创建图像，我们可以将其视为一个图像，因此一种非常简单的方法是将其与background-size/background-repeat组合

As the linear-gradient creates an image and we can treat it as one, so a very simple way is to combine it with background-size/background-repeat.

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>

这篇关于是否可以通过从任意点开始的CSS渐变绘制垂直线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！