css 简单梯形

首页 > 代码库 > css 简单梯形

2024-09-14 20:29:08 219人阅读

通过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="http://www.mamicode.com/#">index</a> 
<a href="http://www.mamicode.com/#">about</a> 
<a href="http://www.mamicode.com/#">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 ;        
             }