css 簡單梯形

通過css2D變形我們可以輕松得到平行四邊形，那么通過此技巧可以得到梯形嗎？

no！

不過我們可以通過3D旋轉得到類似這樣的效果：

transform：perspective（0.5em）  rotateX（5deg）

來生成一個梯形。

 

<div><a>tixing</a></div>                                 

css:
                    
 -webkit-transform:perspective(0.5em)  rotateX(5deg);
 border: 1px solid darkcyan;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: khaki;
 position: relative;
 display: inline-block;
           

 

我們發現元素內容也跟着變形了。

解決方案：

把效果作用於偽元素上。

重新代碼如下，簡單的梯形標簽頁也出爐了：

<nav>
<a href="#">index</a> 
<a href="#">about</a> 
<a href="#">news</a> 
</nav>    
             
 css:
            
nav>a{
position: relative;padding: .3em 1em  0;
text-decoration: none;
display: inline-block;} 
             
nav>a::before{ 
                 content: '';
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 background: lavender;
                 border: 1px solid olive;
　　　　　　　　　　border-bottom: none;
　　　　　　　　　　-webkit-transform:perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
　　　　　　　　　　z-index: -1;    
　　　　　　　　　　-webkit-transform-origin:bottom ;        
             }

 

也可以更改transform-origin的值為bottom  left或者bottom  right。生成如下向左或向右傾斜的標簽頁。

 

 transform-origin:bottom left的效果圖：

 

 -transform-origin:bottom right的效果圖：

 需要注意的是梯形斜邊的角度依賴於元素的寬度。因此元素內容不等時，梯形看起來很不統一。