如何通过css3实现梯形按钮组

如下图红线圈起来的部分怎么用css实现

ul,li{ padding:0;margin:0;list-style:none}
.ul{
	height:30px;
    width:200px;
	display:flex;
	border-bottom:1px solid red;
}
.ul>li{
	height:100%;
	flex:1;
	border:1px solid red;
	border-bottom:0;
	border-right:0;
}
.ul>.lia{
	background:green;
	transform:skewX(30deg);
	border:1px solid red;
	border-bottom:0;
}

/************************/

<ul class="ul">
	<li></li>
	<li class="lia"></li>
	<li class="lia"></li>
	<li class="lia"></li>
</ul>

https://blog.csdn.net/qq_29069777/article/details/102585692