css 实现带文字，阴影效果的棱形

今天开发VUE项目，要实现一个UI效果。感觉效果挺好，记录一下。先看效果图

先说下实现思路刚看到这个布局的时候，感觉用个p 标签旋转45deg应该就能实现，但是旋转之后文字也跟着旋转了。这个问题不能够接受；然后就改为div嵌套一个span和p标签，p标签是棱形，span标签是里面的输入，设置绝对定位，然后居中完美实现。然后是设置阴影部分，本来想阴阳部分也用一个标签实现的，后来发现css3中的box-shadow属性；

上代码

 

        
今日货量
        

          

            总重量（t）
            

              

              {{data.totalWeight||0}}
            
          

          

            总体积（m³）
            

              

              {{data.totalBulk||0}}
            
          
        
      

scss 实现样式

.base-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 16px;
  flex: 1;
}

.weight-div {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-top: 40px;
  align-items: center;
}
.weight-div-div {
  position: relative;
  margin-left: 30px;
}

.weight-div-div-p {
  width: 90px;
  height: 90px;
  background-color: #003c8d;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* Internet Explorer */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
  border-radius: 8px;
  box-shadow: 40px -40px 1px #e4ebf4;
}

.weight-div-div-span {
  height: 90px;
  width: 90px;
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(65, 68, 69, 1);
  line-height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  display: inline-block;
  text-align: center;
}

.weight-div-span {
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(65, 68, 69, 1);
}


 .bottom-right {
    @extend .base-flex;
    flex-direction: column;
    .left-weight {
      @extend .weight-div;

      div {
        @extend .weight-div-div;

        p {
          @extend .weight-div-div-p;
        }

        span {
          @extend .weight-div-div-span;
        }
      }

      span {
        @extend .weight-div-span;
      }
    }

    .right-bulk {
      @extend .weight-div;

      div {
        @extend .weight-div-div;

        p {
          @extend .weight-div-div-p;
          background-color: #f98f24;
          box-shadow: 40px -40px 1px #fff3e8;
        }

        span {
          @extend .weight-div-div-span;
        }
      }

      span {
        @extend .weight-div-span;
      }
    }
  }