给卡片加角标

<view class="p">
    <view wx:if="{{item.tag}}" class="angle-box">{{item.tag}}        </view>
</view>
.p{
    position: relative;
  overflow: hidden;
}
.angle-box {
  color: #fff;
  height: 42rpx;
  width: 200rpx;
  line-height: 42rpx;
  position: absolute;
  right: -106rpx;
  top: -50.8rpx;
  background-color: #ff5933;
  text-align: center;
   -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform-origin: left top;
  transform: rotate(45deg); 
}

效果:

你对生活笑,生活不会对你哭。
原文地址:https://www.cnblogs.com/adanxiaobo/p/13498418.html