两种不同的方法来生成平行四边形
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);
}