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

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

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

上代码

 <div class="bottom-right">
        <div class="col-title">今日货量</div>
        <div style="display:flex;flex-direction:row">
          <div class="left-weight">
            <span>总重量（t）</span>
            <div>
              <p></p>
              <span>{{data.totalWeight||0}}</span>
            </div>
          </div>

          <div class="right-bulk">
            <span>总体积（m³）</span>
            <div>
              <p></p>
              <span>{{data.totalBulk||0}}</span>
            </div>
          </div>
        </div>
      </div>

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;
      }
    }
  }