CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组

1024_Byte

于 2022-01-10 19:22:56 发布

阅读量1.4k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/DDD4V/article/details/122417369

css 专栏收录该内容

7 篇文章

订阅专栏

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skewX() 在这里插入图片描述

梯形按钮组

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>

在这里插入图片描述
平行四边形按钮

<button style="transform: skewX(-30deg);" @click='console.log(11)'><p style="transform: skewX(30deg);">按钮1</p></button>
<button style="transform: skewX(-30deg);" @click='console.log(11)'><p style="transform: skewX(30deg);">按钮2</p></button>

在这里插入图片描述