旋转的矩形卡片

在列表中实现右上角放置旋转矩形的卡片样式，具体实现效果和实现代码如下，快点拿走试试吧！！！

实现效果:

具体实现的 代码片.

// 模板部分代码 
<view class="item-content">
      <view class="status">  已就餐 </view>
</view>
//css样式代码
.item-content {
            position: relative;
            overflow: hidden;  
            height: 200rpx;
            .status{
                position: absolute;
                transform: rotate(45deg);
                top: 15rpx;
                right: -55rpx;
                padding: 10rpx 60rpx;
                color: #fff; 
                background-color: #24A943;
            }
      }