效果图:↓
html↓
<view class="startTag"><text style="margin-right: 10rpx;">未开始</text></view>
<view class="inoutTag"><text style="margin-right: 10rpx;">外贸出口</text></view>
css:
.startTag {
display: block;
padding: 0 25rpx;
line-height: 40rpx;
text-decoration: none;
color: white;
background-color: #f5a713ff;
font-size: 25rpx;
clip-path: polygon(0 0,
100% 0,
calc(100% - 15rpx) 50%,
100% 100%,
0 100%);
border-radius: 8rpx;
}
.inoutTag {
display: block;
padding: 0 15rpx;
line-height: 35rpx;
text-decoration: none;
color: white;
background-color: #6e62ffff;
font-size: 25rpx;
clip-path: polygon(0 0,
calc(100% - 20rpx) 0,
calc(100% - 10rpx) 100%,
0 100%);
border-radius: 8rpx;
}