css 平行四边

在视觉设计中，平行四边形往往给人一种动感。

要生成一个平行四边形，只要通过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);
     }