css+vue双梯形

效果图

描述

给的UI效果图如上，本想着用echarts实现，发现怎么写好像都不太行…于是想着用纯css写算了，大概模仿出来了…，虽然可能不是一模一样，但是奈何领导也通过了🤨，细节还是需要再优化优化滴。代码如下（vue+less）：

实现

// dataList 数据源
[ { "title": "本科", "value": 14314, "percent": 68.7, "num_pj": "6.8%", "num_zy": "68.7%" }, { "title": "大专", "value": 4618, "percent": 22.2, "num_pj": "0.2%", "num_zy": "22.2%" }, { "title": "研究生及以上", "value": 1519, "percent": 7.3, "num_pj": "2.6%", "num_zy": "7.3%" }, { "title": "中专及以下", "value": 388, "percent": 1.9, "num_pj": "0.0%", "num_zy": "1.9%" } ]

<!-- html -->
 <div class="ladder-shaped-detail-container rel">
    <div :class="['div' + Number(index + 1), 'rel', 'laddershaped-public']" v-for="(item, index) in dataList"
      :key="index + 70">
      <div :class="[
          `div${Number(index + 1)}-inner`,
          'laddershaped-public-inner',
          'abs',
          'laddershaped-public',
        ]">
        <div>
          {{ dataList.length ? item.title : '' }}
        </div>
      </div>
    </div>
  </div>
  
<!-- less，vw以1920尺寸换算 -->
<style lang="less" scoped>
  .rel {
    position: relative;
  }

  .abs {
    position: absolute;
  }

  .ladder-shaped-detail-container {
    font-size: 0.7292vw;
    color: #333333;
    margin-left: 1.0417vw;

    .laddershaped-public {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 2.6042vw;
    }

    .laddershaped-public::after {
      position: absolute;
      width: 100%;
      height: 100%;
      content: '';
      z-index: -1;
    }

    .laddershaped-public-inner::after {
      border: 0.0521vw solid;
    }

    .div1 {
      perspective: 3.6042vw;
      width: 15.2396vw;
      -webkit-perspective: 3.6042vw;

      &::after {
        background: rgba(0, 129, 255, 0.1);
        -webkit-transform: rotateX(-19deg) rotateY(0deg);
        transform: rotateX(-19deg) rotateY(0deg);
      }
    }

    .div2 {
      -webkit-perspective: 1.3542vw;
      width: 11.4896vw;
      perspective: 1.3542vw;
      margin-left: 1.9271vw;

      &::after {
        background: rgba(0, 213, 162, 0.1);
        -webkit-transform: rotateX(-7deg) rotateY(0deg);
        transform: rotateX(-7deg) rotateY(0deg);
      }
    }

    .div3 {
      width: 8.8854vw;
      perspective: 3.2813vw;
      margin-left: 3.125vw;
      -webkit-perspective: 3.2813vw;

      &::after {
        background: rgba(0, 164, 251, 0.1);
        -webkit-transform: rotateX(-14deg) rotateY(0deg);
        transform: rotateX(-14deg) rotateY(0deg);
      }
    }


    .div4 {
      width: 7vw;
      perspective: 4.1667vw;
      margin-left: 4.0625vw;
      -webkit-perspective: 4.1667vw;

      &::after {
        background: rgba(255, 181, 13, 0.1);
        -webkit-transform: rotateX(-12deg) rotateY(0deg);
        transform: rotateX(-12deg) rotateY(0deg);
      }
    }


    .div1-inner {
      perspective: 2.9688vw;
      width: 11.9688vw;
      -webkit-perspective: 2.9688vw;

      &::after {
        background: #d7e5fd;
        border-color: #387ff7;
        -webkit-transform: rotateX(-19deg) rotateY(0deg);
        transform: rotateX(-19deg) rotateY(0deg);
      }
    }

    .div2-inner {
      width: 8.8vw;
      perspective: 1.4063vw;
      -webkit-perspective: 1vw;

      &::after {
        background: rgba(0, 213, 162, 0.2);
        border-color: #00d5a2;
        -webkit-transform: rotateX(-7deg) rotateY(0deg);
        transform: rotateX(-7deg) rotateY(0deg);
      }
    }


    .div3-inner {
      width: 6.5vw;
      perspective: 2.6563vw;
      margin-left: 0.2604vw;
      -webkit-perspective: 2.4vw;

      &::after {
        background: rgba(0, 194, 246, 0.2);
        border-color: #00c2f6;
        -webkit-transform: rotateX(-14deg) rotateY(0deg);
        transform: rotateX(-14deg) rotateY(0deg);
      }
    }


    .div4-inner {
      width: 5.2vw;
      -webkit-perspective: 2vw;
      perspective: 2vw;
      margin-left: 0.3125vw;

      &::after {
        background: rgba(255, 181, 13, 0.2);
        border-color: #ffb50d;
        -webkit-transform: rotateX(-12deg) rotateY(0deg);
        transform: rotateX(-12deg) rotateY(0deg);
      }
    }
  }
</style>