微信小程序css三角形内写文字-如vip标签

效果：

wxml：

 <view class="productStatus">
            <span>
                <em>VIP</em>
            </span>
        </view>

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 #ffafcc;
    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.6rem;
    color: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

 

 微信小程序开发交流QQ群：897729103

 本人微信：649231659，承接软件开发&学习交流

微信小程序开发学习视频（含免费课程）：

(2022-30节免费)微信小程序开发-60W用户小程序实战基础+进阶--微信开发视频教程-移动开发-CSDN程序员研修院

H5网页-WebSocket（Workerman-PHP）即时通讯 --微信开发视频教程-移动开发-CSDN程序员研修院

从购买服务器（秒杀）配置宝塔LAMP环境（域名解析、免费SSL申请）L--其他视频教程-前端开发-CSDN程序员研修院

从购买服务器（秒杀）配置宝塔LAMP环境（域名解析、免费SSL申请）L--其他视频教程-前端开发-CSDN程序员研修院

微信小程序支付&退款&物流接口思路讲解（付前后台代码+数据库文件）--微信开发视频教程-移动开发-CSDN程序员研修院
————————————————