标签：
假如要制作平行四边形的按钮
可以通过使用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样式
标签：
原文地址：http://www.cnblogs.com/7-Eleven/p/5636255.html
