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

 2016-09-30 08:09

梯形一直比平行四边形运用的还要广泛点。一直以来,梯形都是众所周知难以用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,就可以立刻获得左倾斜或者右倾斜的标签页。

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

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: