css 實現帶文字，陰影效果的稜形

今天開發vue專案，要實現乙個ui效果。感覺效果挺好，記錄一下。先看效果圖

先說下實現思路剛看到這個布局的時候，感覺用個p 標籤旋轉45deg應該就能實現，但是旋轉之後文字也跟著旋轉了。這個問題不能夠接受；然後就改為div巢狀乙個span和p標籤，p標籤是稜形，span標籤是裡面的輸入，設定絕對定位，然後居中完美實現。然後是設定陰影部分，本來想陰陽部分也用乙個標籤實現的，後來發現css3中的box-shadow屬性；

上**

今日貨量

總重量（t）
} 
總體積（m³）
} 

.base-flex 

.weight-div 
.weight-div-div 
.weight-div-div-p 
.weight-div-div-span 
.weight-div-span 
.bottom-right 
span 
}span 
}.right-bulk 
span 
}span }}

畫帶陰影效果的文字

using system using system.drawing using system.drawing.text using system.drawing.drawing2d using system.collections using system.componentmodel using ...

畫帶陰影效果的文字

using system using system.drawing using system.drawing.text using system.drawing.drawing2d using system.collections using system.componentmodel using ...

畫帶陰影效果的文字

using system using system.drawing using system.drawing.text using system.drawing.drawing2d using system.collections using system.componentmodel using ...