css3-clip-path draws polygons

Rendering: ↓

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;
	}