菱角导航栏 vue uni-app

UI刚改的界面，代同事写，主要思路，给父级添加伪类即可，里面的字要定位，因为伪类也定位了
上代码

<view span="3" v-for="(item,index) in navlistwrap" :key='index'>
										<view class="navItem" :class="activeIndex==index?'avtiveNav avtiveStyle':''" @click="changenav(index)">
											<text class="navText">{{item.name}}</text>
										</view>
									</view >

css

.navItem {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		background: #5AB53C;
		color: #ffffff;
		position: relative;

	}
.avtiveNav::after {
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		border: 1px rgba(255, 255, 255, .2) solid;
		border-bottom: none;
		transform: scale(1.1, 1.5) perspective(.7em) rotateX(2.2deg);
		background:#ffffff;
		z-index: 1;
		border-radius: 16rpx 16rpx 0 0;
		box-sizing: border-box;
	}
	.avtiveStyle{
		color:#5AB53C;
		/* background:#5AB53C ; */
	}