css：实现斜角标签

效果

html

<view class="room" v-for="(item,index) in list" >
					<view class="r-certer" @click="details(item)">
						<view class="tag" v-if="item.repairStatus == 0" style="background-color: #F9D5DD;color: #FF4E4E;">
							报修中
						</view>
						<view class="tag"  v-if="item.repairStatus == 1" style="background-color: #BBE6EC;color: #14B796;">
							已维修
						</view>
</view>

css less布局

.r-certer {
					width: 100%;
					background-color: #FFFFFF;
					padding: 0 30rpx;
					padding-top: 10rpx;
					border-radius: 20rpx;
					opacity: 0.7;
					overflow: hidden; // 隐藏标签的超出部分
					position: relative; //让下方相对当前绝对定位 
.tag{
					  text-align: center; // 文本居中 
					  position: absolute; // 绝对定位
					  top: 15px;
					  font-weight: bold;
					  right: -35px;
					  // 以下属性会影响斜边标签的显示
					  width: 40%;
					  height: 60rpx;
					  line-height: 60rpx;
					  transform: rotate(40deg);
					} 
					
}