今天开发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;}}}
