微信小程序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);
}

原文地址：https://www.cnblogs.com/yuobey/p/10294025.html