css3揭秘读书笔记--平行四边形与切角

  在一些比较酷的网站上，看到人家的导航栏有一个个平行四边形组成，在配合一些好的颜色，科技感还是蛮足的。常用的方法是通过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;
}