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

Posted 2022-12-07 1024_Byte

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>