在视觉设计中，平行四边形往往给人一种动感。
要生成一个平行四边形，只要通过css变形，就可做到：
-webkit-transform: skewX(-45deg);
那么生成一个平行四边形的按钮呢？列如下面这样的效果图:
通过第一次尝试，我使用了斜向变形：得到下面的效果图,发现里面的文字也进行了拉伸。
解决方案1：
有没有办法让容器形状倾斜，而其中的内容不拉伸呢？
办法就是，我们再对里面的内容进行一次反向skew()变形，所以我们首先得把里面的内容添加一层额外的元素进行包裹：
<a class="g"> <div> Click me</div> </a>
.g{-webkit-transform: skewX(-45deg);} .g>div{-webkit-transform: skewX(45deg)}
最终能得到的正确的效果图。
解决方案2：
思路是，把所有的样式应用到伪元素上，然后再对伪元素进行变形。因为我们的内容不包含在伪元素里。so 可以使用伪元素方案：
.g{position: relative;
/*其他的文字样式，内边距等等*/} .g::before{ content:‘‘;//用伪元素来生成一个矩形 position: absolute; top:0;right: 0;bottom: 0;left: 0;//所有的偏移量设置为0，以便于伪元素被拉至宿主元素的尺寸。 z-index: -2; background: #58a; -webkit-transform: skew(45deg); }
原文：http://www.cnblogs.com/rain-null/p/6690093.html