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

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