CSS梯形进度条

蹩脚

于 2022-11-25 12:13:46 发布

阅读量266

点赞数

分类专栏：前端文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_39984859/article/details/128035799

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS梯形进度条

通过一个梯形的背景图做背景，在上面画一个梯形的div，实现进度条的样式。

代码如下

<div class="step_main">
  <!-- 进度条 -->
  <div class="step_box">
    <div class="wrap" :style="{width: now_factory_item.rate + '%'}">
      <div class="clip-path" ref="clipPath"></div>
      <span></span>
      <span class="guang"></span>
    </div>
    <img :src="require('@/assets/img/111111.png')">
  </div>
</div>

.step_main {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
  .step_box {
    position: relative;
    height: .97rem;
    width: 3.12rem;
    >img {
      width: 100%;
      height: .39rem;
      object-fit: cover;
    }
    .wrap_other {
      .clip-path {
        clip-path: polygon(100% 0, 97% 100%, 0 100%, .1rem 0) !important;
      }
      span {
        &:nth-child(2) {
          width: 98%;
        }
      }
    }
    .wrap {
      width: 0;
      position: absolute;
      z-index: 9;
      bottom: 0;
      height: .39rem;
      transition: width .5s linear;
      .clip-path {
        width: 100%;
        height: .23rem;
        background-image: linear-gradient(to right, #2e93d8, #9ae3de);
        clip-path: polygon(97% 0, 100% 100%, 0 100%, .1rem 0);
        position: relative;
        border-top-left-radius: .02rem;
        border-top-right-radius: .02rem;
      }
      span {
        &:nth-child(2) {
          position: absolute;
          width: 100%;
          height: .16rem;
          border-bottom-left-radius: .02rem;
          border-bottom-right-radius: .02rem;
          background: linear-gradient(to right, #2e93d8, #9ae3de);
          top: .22rem;
        }
        &.guang {
          width: 100%;
          height: .97rem;
          background: linear-gradient(180deg, rgba(47,184,255,0) 0%, rgba(47,184,255,0) 20%, rgba(75,198,245,0.4) 55%, rgba(107,212,235,0.7) 84%, #85E0E1 100%);
          position: absolute;
          left: 0;
          bottom: 0;
          border-bottom-left-radius: .02rem;
          border-bottom-right-radius: .02rem;
        }
      }
    }
    >img {
      position: absolute;
      bottom: 0;
    }
  }
}