css平行四边形与菱形变换

*以下技巧均源自于Lea Verou所著《CSS Secrets》

平行四边形

　　平行四边形的构造可以基于矩形通过skew()的变形属性进行斜向拉升得到（skew所用的坐标系，纵向是X轴，横向是Y轴，与常见的坐标系相反）。

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > Title   title  > 
       style  >  
        .location  {  
            position  :   relative  ;  
            top  :   150px  ;  
            left  :   150px  ; 
         }  
         .button  {  
             color  :   white  ;  
             background-color  :   #51bfff  ;  
             width  :   120px  ;  
             height  :   50px  ;  
             line-height  :   50px  ;  
             text-align  :   center  ;  
             transform  :   skewX(-45deg)  ; 
          } 
       style  > 
   head  > 
   body  > 
       div   class  ="location button"  > click   div  > 
   body  > 
   html  >  

查看更多关于css平行四边形与菱形变换的详细内容...