平行四边形

假如要制作平行四边形的按钮

可以通过使用transform：skew（）变形的属性来对这个矩形进行斜向拉伸就能实现

但是，一眼就能看出，里面的内容也跟着发生了拉伸现象。

解决方案一：

嵌套元素方案

<div class="click">
    <div>CLICK ME</div>
</div>

.click{transfrom:skew(-45deg)}
.click>div{transfrom:skew(45deg)}

得到的效果如下

很明显，问题得到了解决，但是意味着不得不添加额外的html元素，如果结构层不允许的，或者希望严格保持结构的纯净度，那就要使用另外的一个方案

解决方案二：

伪元素方案

<div class="click">CLICK ME</div>

.click {position:relative}
.click ::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:#58a;transform:skew(-45deg)}

要注意的是：给伪元素加背景颜色后，会覆盖之前的元素，所以要加z-index：-1，让他堆叠到宿主元素之后。

效果图：

 

ps：以上代码有省略部分css样式

转载于:https://www.cnblogs.com/7-Eleven/p/5636255.html