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:;

 left:;

 bottom:;

 right:;

 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:;

                 left:;

                 right:;

                 bottom:;

                 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的效果图：

需要注意的是梯形斜边的角度依赖于元素的宽度。因此元素内容不等时，梯形看起来很不统一。