在一些比较酷的网站上,看到人家的导航栏有一个个平行四边形组成,在配合一些好的颜色,科技感还是蛮足的。常用的方法是通过skew()的变形属性来完成。该方法主要有三种情况,
skewX() 该方法会保持高度,沿着X轴倾斜
skewY() 该方法会保持宽度,沿着Y轴倾斜
skew(x,y) 该方法先由X轴倾斜,再由Y轴倾斜
直接对一个div进行skew操作,使其成为平行四边形,这样会导致其内容也跟着变形,解决方案有两种,通过嵌套元素和伪元素来解决。
嵌套元素方案是通过给div再嵌套一个div,外部使用skew方法使其成为平行四边形,内部div在应用一次反向的skew变形,从而抵消容器的变形效果。
<div class="wrap" style="margin:0auto;width:200px;height:100px;background:#eee;text-align:center;line-height:100px;transform:skewX(-45deg);">
<div style="transform:skewX(45deg);">CLICK ME</div>
</div>
伪元素方案,这种方式是通过给元素设置个::before,变形样式都设置在该伪类上,然后通过相对定位来设置该伪元素的位置。
.button{ position:relative; width:200px; height:100px; margin:0 auto; text-align: center; line-height: 100px; } .button::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index: -1; background:#58a; transform:skew(-45deg); } <div class="button"> CLICK ME </div>
这种方案巧妙在于这个平行四边行的大小是根据父元素来的,自适应父元素的大小的。原理就在于在绝对定位中设置了子元素left,top,bottom,right都为0,表明子类元素和父元素的距离为0,自然就和父元素自适应了。
关于切角,把角切掉是一种较为流行的设计风格,常用的方法是通过渐变来实现的。linear-gradient语法如下
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
<angle>指定角度,用于指定渐变的方向
<side-or-corner>描述渐变的起点位置
<color-stop>由一个color值组成,并且跟随一个可选的终点位置。
最终该切角的代码如下:
<div class="text"> 切角text </div> .text{ width:150px; height:150px; line-height:150px; text-align:center; background:linear-gradient(135deg, transparent 15px, #58a 0 ); }
如果需要用四个切角的话,代码如下所示:
<div class="text"> 切角text </div> .text{ width:150px; height:150px; line-height:150px; text-align:center; background:linear-gradient(135deg, transparent 15px, #58a 0 ) top left, linear-gradient(-135deg, transparent 15px, #58a 0 ) top right linear-gradient(-45deg, transparent 15px, #58a 0 ) bottom right, linear-gradient(45deg, transparent 15px, #58a 0 ) bottom left; background-size:50% 50%; background-repeat:no-repeat; }