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

Question

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

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

我得到类似这样的信息：

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

有可能吗？

到目前为止我已经尝试过什么：我已经检查过背景大小或背景位置是否可以改变这一点，但仍然没有成功。

Answer 1

使用双渐变，第一个是从背景颜色到透明的垂直渐变，从下到上，第二个是从右到左的重复线性渐变。

div {
  width: 700px;
  height: 100px;
  background: linear-gradient(to top, ivory, ivory 50px, transparent 50px, transparent), repeating-linear-gradient(to right, black, black 1px, ivory 1px, ivory 100px);
}

<div></div>

Answer 2

使用children，为每个child设置不同的背景，同时控制它们之间的比例。

在下面的示例中，我使用了您的背景，但控制了 "origin"，这在使用 repeating-linear-gradient.

时 "normally" 是不可能的

repeating-linear-gradient() 将方向作为第一个参数。

方向可以是角度（如您指定的那样）、边（to left、to right...）或角（to left bottom、...） .这意味着它从相反的 side/corner 开始。它不能从元素内的任意点开始。

但这并不意味着你不能有一个或多个 children 从他们的连接边向外开始背景:

.custom-origin {
  display: flex;
  flex-wrap:wrap;
  height: 100vh;
}
.custom-origin div {
  background-image: repeating-linear-gradient(to left, black, black 1px, linen 1px, linen 100px);
  flex-grow: 1;
  min-width: 33.33%;
}
.custom-origin div:nth-child(2) {
  background-image: repeating-linear-gradient(to right, white, white 99px, black 1px, black 100px);
}
.custom-origin div:first-child {
  max-width: 33.33%; /* this sets the position of your origin. 
                     * If not set, it will be the exact half of the parent,
                     * in this example 
                     */ 
}
.custom-origin .full {
  min-width: 100%;
  background-image: none;
  background-color: linen;
}
body {
  margin: 0;
}

<div class="custom-origin">
  <div></div>
  <div></div>
  <div class="full"></div>
</div>

通过控制 children 的大小，您可以控制背景图像的应用方式。为了勾勒"position"，我把其中一个children的linen改成了white。

Answer 3

这更像是一种技巧。

它将渐变垂直分成十个 10% 的部分。

您可以通过将 rgba 中的 alpha 通道编辑为 1 或 0 来切换每个部分

It's not supported in Edge and IE.

.container {
  height: 50px;
  background-color: linen;
}

.grad {
  height: 100%;
  background-image: repeating-linear-gradient(90deg, black, black 1.5px, linen 1.5px, linen 100px);
}

.middle-to-bottom {
  -webkit-mask-image: linear-gradient(
  rgba(0, 0, 0, 1)10%,
  rgba(0, 0, 0, 1)20%, 
  rgba(0, 0, 0, 1)30%, 
  rgba(0, 0, 0, 1)40%,
  rgba(0, 0, 0, 0)50%,
  rgba(0, 0, 0, 0)60%, 
  rgba(0, 0, 0, 0)70%,
  rgba(0, 0, 0, 0)80%, 
  rgba(0, 0, 0, 0)90%, 
  rgba(0, 0, 0, 0)100%);
}

.middle-to-top {
  -webkit-mask-image: linear-gradient( 
  rgba(0, 0, 0, 0)10%,
  rgba(0, 0, 0, 0)20%, 
  rgba(0, 0, 0, 0)30%, 
  rgba(0, 0, 0, 0)40%,
  rgba(0, 0, 0, 0)50%,
  rgba(0, 0, 0, 1)60%, 
  rgba(0, 0, 0, 1)70%,
  rgba(0, 0, 0, 1)80%, 
  rgba(0, 0, 0, 1)90%, 
  rgba(0, 0, 0, 1)100%);
}

.middle {
  -webkit-mask-image: linear-gradient( 
  rgba(0, 0, 0, 0)10%,
  rgba(0, 0, 0, 0)20%, 
  rgba(0, 0, 0, 0)30%, 
  rgba(0, 0, 0, 1)40%,
  rgba(0, 0, 0, 1)50%,
  rgba(0, 0, 0, 1)60%, 
  rgba(0, 0, 0, 0)70%,
  rgba(0, 0, 0, 0)80%, 
  rgba(0, 0, 0, 0)90%, 
  rgba(0, 0, 0, 0)100%);
}


.random {
  -webkit-mask-image: linear-gradient( 
  rgba(0, 0, 0, 0)10%,
  rgba(0, 0, 0, 0)20%, 
  rgba(0, 0, 0, 1)30%, 
  rgba(0, 0, 0, 1)40%,
  rgba(0, 0, 0, 0)50%,
  rgba(0, 0, 0, 0)60%, 
  rgba(0, 0, 0, 0)70%,
  rgba(0, 0, 0, 1)80%, 
  rgba(0, 0, 0, 1)90%, 
  rgba(0, 0, 0, 0)100%);
}

h4 {
  text-align:center;
  margin:.5em auto;
  padding:2px;
}

<h4>middle to top</h4>
<div class="container">
  <div class="grad middle-to-bottom"></div>
</div>

<h4>middle to bottom</h4>
<div class="container">
  <div class="grad middle-to-top"></div>
</div>

<h4>middle</h4>
<div class="container">
  <div class="grad middle"></div>
</div>

<h4>random</h4>
<div class="container">
  <div class="grad random"></div>
</div>

Answer 4

由于linear-gradient创建了一个图像，我们可以把它当作一个图像，所以一个非常简单的方法就是将它与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 渐变绘制垂直线？

Is it possible to draw vertical lines via css gradients starting from arbitrary point?

css

linear-gradients