楠栀TML
2021-05-21 15:09
采纳率: 33.3%
浏览 53

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 子幽 2021-05-21 15:27
    已采纳
    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>
    
    
    

     

    点赞 1 评论
  • 点赞 评论

相关推荐 更多相似问题