zoukankan      html  css  js  c++  java
  • 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的效果图:

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

  • 相关阅读:
    jq 自定义动画案例
    jq 左右轮播图案例
    hdu-5728 PowMod(数论)
    UVA-11892(组合游戏)
    UVA-12293(组合游戏)
    LA-5059(组合游戏)
    hdu-5724 Chess(组合游戏)
    hdu-5750 Dertouzos(数论)
    hdu-5748 Bellovin(LIS)
    hdu-5747 Aaronson(水题)
  • 原文地址:https://www.cnblogs.com/rain-null/p/6709293.html
Copyright © 2011-2022 走看看