css渐变linear-gradient效果如何“拼接”？

作者站长头像
站长
· 阅读数 9

效果如如下：line1为参考效果，由一个div，通过background-image: linear-gradient(to left, green 0%, red 100%)实现；

但是由于某些特殊原因，这条线需要通过多条线段拼接而成，但是效果还是像line1一样，不能有割裂感，所以，line2、line3 分别有如下要求，该如何简单实现呢？

line2：线段1、2、3分别占 line1 的1/2、1/4、1/4

line3：线段1、2分别占 line1 的2/3、1/3

css渐变linear-gradient效果如何“拼接”？

回复
1个回答
avatar
test
2024-06-29

只能把background-size写一个固定值，然后对每个节点改变backgroudn-postion

.progress{
  background: linear-gradient(to right,red, green);
  background-size: 600px 100%;
}
.p2{
  background-position: -200px;
}
.p3{
  background-position: -400px;
}

answer image

https://codepen.io/xboxyan/pen/eYQxJLE

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容