微信小程序 三角形实现 （评论三角形）

微信小程序 三角形实现 （评论三角形）

效果

WXSS

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

WXML

<view class="productStatus">
  <span>
    <em>评论</em>
  </span>
</view>