微信小程序css画三角形内有文字
<view class="productStatus"> <span> <em>已上架</em> </span> </view>
.productStatus { position: absolute; right: 0; top: 0; height: 1.81rem; width: 1.81rem; display: flex; align-items: center; } .productStatus span { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 1.81rem solid #81d8d0; border-left: 1.81rem solid transparent; } .productStatus em { position: absolute; top: -1.8rem; right: 0rem; height: 1.27rem; width: 1.27rem; line-height: 1.2rem; text-align: center; font-size: 0.29rem; color: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); }