css绘制多边形tabs导航、步骤

Pir。。。。

已于 2024-09-27 15:35:30 修改

阅读量282

点赞数 3

文章标签： css 前端 javascript

于 2024-09-26 15:09:16 首次发布

本文链接：https://blog.csdn.net/pirs123/article/details/142556144

版权

最近搞一个合同签约并且支付的页面用到了这个步骤条，决定不用uview的自己写一个，就想到了这个多边形步骤条还挺好看的，实现过程如下。

实现效果：

html代码:

p-flex p-flexx是我写的通用样式便于我快捷开发页面的

<view class="polygon-tabs p-flex" >
	<view class="polygon-tabs-item p-flex" >
		<view class="polygon p-flexx hide-left">阅读合同</view>
		<view class="triangle"></view>
	</view>
	<view class="polygon-tabs-item p-flex" >
		<view class="polygon p-flexx">签约</view>
		<view class="triangle"></view>
	</view>
	<view class="polygon-tabs-item p-flex" >  
		<view class="polygon p-flexx">支付</view>
		<!-- <view class="triangle"></view> -->
	</view>
</view>

css代码

.polygon-tabs {
	.polygon-tabs-item {
		width: calc(100%/12 * 4);
		height: 60rpx; 
		color: #fff;
		font-size: 26rpx;
		.polygon {
			width: 100%;
			height: 100%;
			background-color: limegreen; 
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10rpx 50%);  
		}
		.triangle {
			width: 20rpx;
			height: 60rpx;
			background-color: limegreen;
			margin-left: -12rpx;
			clip-path: polygon(0 0, calc(100% - 10rpx) 0, 100% 50%, calc(100% - 10rpx) 100%, 0 100%); 
		}
		.hide-left {
			clip-path: none;
		}
	}
}

写出来看着挺笨重的，大佬轻喷，主打能实现就好嘿嘿