CSS做梯形标签页的最佳效果

CSS做梯形标签页的最佳效果

 2016-09-30 08:09    网页设计   标签：css   3123    发表评论

梯形一直比平行四边形运用的还要广泛点。一直以来，梯形都是众所周知难以用CSS来生成的形状。网页设计师大部分用图片或者是用边框来模拟梯形两侧的斜边。尽管这些能实现梯形效果，不够灵灵活。

如果有一组2D变形属性可以生成一个梯形，我们就可以利用“平行四边形”涉及的技巧来达到目的。然而很遗憾的是没有。

但我们可以通过另外一种方式来做，试想系在现实的三维世界中旋转一个矩形。由于透视的关系，我们最终看到的二位图像往往就是一个梯形。OK，那么我们在CSS中就用3D宣传来模拟出这个效果：

梯形效果

梯形效果

transform: perspective(.5em) rotateX(5deg);

可以看到，经过3D变形后，内部也发生了变形效果。这一点和2D有点不同，2D变形后可以用逆转方法把这个效果抵消，但3D效果无法抵消。因此，我们想发挥3D变形功能来生成梯形就要把这些变形效果写在伪元素上。

梯形效果

.tixing{
    position:relative;
    display:inline-block;
    z-index:1;
}
.tixing::before{
    content:' ';
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    z-index:-1;
    background:#E64A19;
    transform: perspective(.5em) rotateX(5deg);
}

梯形是做出来了，但我们也发现了一个问题，好像位置有点不对?

这是因为3D默认的宣传位置是按元素的XY中心轴来的(下图)。我们刚才所做的动作虽然没有什么问题，但从视觉上来看整个图形有点偏一侧。

梯形效果

为了让我们更好的掌握，我们可以用transform-origin:bottom;命令，让它以元素的底部为X旋转的轴。

梯形效果

效果做出来后你会发现元素很矮了，那么我们需要把这个元素再拉大点，scaleY()变形是个不错的选择。经过我们尝试了多次，发现130%的时候(这个需要自己算)刚好能搞定高度上是缩水，于是我们在代码::before里面再加上两段：

transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin:bottom;

梯形效果

现在我们来看下别人做的一个效果，感觉很不错了：

nav>a{
    position:relative;
    display: inline-block;
    padding: .3em 1em 0;
    color:black;
}
nav>a::before{
    content: ' ';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    z-index:-1;
    background:#ccc;
    background-image:linear-gradient(hsla(0,0%,100%,.6),
        hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);
    border-bottom:none;
    border-radius:.5em .5em 0 0;
    box-shadow:0 .15em white inset;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin:bottom; 
}

做出来的效果如下：

按钮一 按钮二 按钮三

效果大体出来了，我们给它增加了背景、边框、圆角、投影等一系列样式。不仅如此，我们只需要把transform-origin改成bottom left或者bottom right，就可以立刻获得左倾斜或者右倾斜的标签页。

尽管优点很多，但这个技巧也不是完美的，它存在一个非常大的缺点：斜边的角度依赖于元素的宽度。当元素的内容长度不等时，斜度一致的梯形就很伤脑筋了。好在标签长度相似，视觉上还看不出来。