问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
qngyun1029
    97634207304

    效果如如下：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

    css3css
    阅读 2.8k
    3 个回答
    得票最新
    头像
    XboxYan
      18.2k93790
      ✓ 已被采纳

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

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

      image.png

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

      头像
      乔治
        13.1k1329
        .container {
  display: flex;
}


.segment {
  height: 20px; 
}

/* line2 */
.segment.line2-1 {
  width: 50%; /* 线段1占总长度的1/2 */
  background: linear-gradient(to right, green, red 50%, transparent 50%);
}

.segment.line2-2 {
  width: 25%; /* 线段2占总长度的1/4 */
  background: linear-gradient(to right, transparent, green 50%, red 50%, transparent 50%);
}

.segment.line2-3 {
  width: 25%; /* 线段3占总长度的1/4 */
  background: linear-gradient(to right, transparent, green 50%, red);
}

/* line3 */
.segment.line3-1 {
  width: 66.67%; /* 线段1占总长度的2/3 */
  background: linear-gradient(to right, green, red 66.67%, transparent 33.33%);
}

.segment.line3-2 {
  width: 33.33%; /* 线段2占总长度的1/3 */
  background: linear-gradient(to right, transparent, green 66.67%, red);
}

        <div class="container">
  <div class="segment line2-1"></div>
  <div class="segment line2-2"></div>
  <div class="segment line2-3"></div>
</div>

<div class="container">
  <div class="segment line3-1"></div>
  <div class="segment line3-2"></div>
</div>
        头像
        Clarence
          118628

          在@乔治 的回答上做了一点点修改:

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>draw segment line</title>
    <style>
        .reference {
            height: 30px;
            background-image: linear-gradient(to left, green 0%, red 100%);
        }

        .container {
            display: flex;
            background-image: linear-gradient(to left, green 0%, red 100%);
        }

        div.reference,
        div.container {
            margin-bottom: 20px;
        }

        .segment {
            outline: 1px solid black;
            height: 30px;
        }

        .segment.line2-1 {
            flex-basis: 50%;
        }

        .segment.line2-2 {
            flex-basis: 25%;
        }

        .segment.line2-3 {
            flex-basis: 25%;
        }

        .segment.line3-1 {
            flex-basis: 66.67%;
        }

        .segment.line3-2 {
            flex-basis: 33.33%;
        }
    </style>
</head>

<body>
    <div class="reference"></div>
    <!-- 
        line2：线段1、2、3分别占 line1 的1/2、1/4、1/4
        line3：线段1、2分别占 line1 的2/3、1/3
     -->
    <div class="container">
        <div class="segment line2-1"></div>
        <div class="segment line2-2"></div>
        <div class="segment line2-3"></div>
    </div>

    <div class="container">
        <div class="segment line3-1"></div>
        <div class="segment line3-2"></div>
    </div>
</body>

</html>

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题