uniapp 微信小程序右上角的梯形标记已读状态样式记录

 <view class="info-item">
      <view class="had-read">
        <text class="read-text">已读</text>
      </view>
    </view>

.info-item {
  display: flex;
  flex-direction: column;
  background-color: pink;
  border-radius: 12rpx;
  padding: 32rpx;
  height: 300rpx;
  width: 100%;
  position: relative;
  .had-read {
    position: absolute;
    top: -110rpx;
    left: -110rpx;
    width: 120rpx;
    height: 120rpx;
    background: transparent;
    border-top: 50rpx solid #e2e4e8;
    border-bottom: 50rpx solid transparent;
    border-left: 50rpx solid transparent;
    border-right: 50rpx solid transparent;
    margin: 0 auto;
    transform: rotate(135deg);
    color: #fff;
    z-index: 1;
    .read-text {
      position: absolute;
      top: -42rpx;
      left: 26rpx;
      transform: rotate(-182deg);
      font-size: 28rpx;
    }
  }
}

效果图