css3-clip-path 绘制多边形

Pumpkinz

已于 2023-05-12 15:31:22 修改

阅读量208

点赞数

分类专栏： css3 文章标签： css3 css 前端

于 2023-04-26 15:13:28 首次发布

本文链接：https://blog.csdn.net/lanbaiyans/article/details/130386765

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：↓

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