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

 2016-09-29 08:27

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

让我们来回顾下平行四边形是如何生成的吧?中学课本上我们学习过,平行四边形是由矩形进行拉伸而得到的。在我们网页设计中,我们也可以通过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);
}


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: