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

Question

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

Answer 1

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>