两种不同的方法来生成平行四边形

两种不同的方法来生成平行四边形

 2016-09-29 08:27    网页设计   安南子   930    发表评论

平行四边形一般可以用来展现比较直管的动感，在一些运动型的网站上我们会用的比较多。

让我们来回顾下平行四边形是如何生成的吧？中学课本上我们学习过，平行四边形是由矩形进行拉伸而得到的。在我们网页设计中，我们也可以通过skew()拉伸平行四边形而得到这样的一个图形：

transform:skew(-45deg);

但这个对于按钮来说就有一个比较头疼的问题：因为使用了变形导致它里面的内容也发生了倾斜：

点击按钮

那么有没有办法让容器的形状倾斜，而保持其内容不变呢？

嵌套元素方案

我们可以再加一个容器，让它反向倾斜从而抵消掉原来的倾斜角度：

<a href="#" class="button">
    <div>点击按钮</div>
</a>

.botton{transform:skewX(-45deg);}
.botton>div{transform:skewX(45deg);}

这个是最常用的方法，但如果你的结构层不允许，那么我们有一个纯CSS来解决的办法。

伪元素方案

另外一种思路就是把所有样式应用到伪元素上，然后让伪元素进行变形。

我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素尺寸由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用position:relative样式，其为伪元素设置position:absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。

.button{
    position:relative;
    /*其他式样代码*/
}
.button::before{
    content: ' ';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
}

由于伪元素生成的方块是重叠在内容上的，一旦设置了背景就会遮住内容。为了修复这个问题，我们给它z-index:-1的样式。然后再对它进行变形：

.button{
    position:relative;
    /*其他式样代码*/
}
.button::before{
    content: ' ';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    z-index:-1;
    background:#009688;
    transform:skew(45deg);
}