我们经常可以看到这种梯形标签:
要实现这种梯形标签,可以通过背景图像模拟,但是要额外请求图片数据;可以用在矩形旁带两个三角形来创建,但是也增加了额外的元素或额外的请求;可以通过边框来伪造,但是这样很不灵活,比如,需要额外添加边框时就有了冲突。
现有一个解决方案,通过3D旋转一个矩形,在视觉上将此矩形伪造成一个梯形:
图注:通过3D旋转创建一个梯形。上图:变换前;下图:变换后。
虽然上图通过旋转把一个矩形变为梯形,但其中的文本也跟着旋转了,而把文本旋转回来可行、但比较复杂,所以简便起见不能直接把旋转用在文本所在元素上。如此,唯一实用的方式就是利用3D变换来创建一个梯形,把这种变换应用到伪元素上:
.tab{ position:relative; display:inline-block; padding:.5em 1em .35em; color:white; } .tab::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; background:#58a; transform:scaleY(1.3) perspective(.5em) rotateX(5deg); transform-origin:bottom; }
![]()
此效果视觉上等同于提到的基于border的技术,只是这里的语法更简洁。但是,当你开始给标签应用给一些样式的时候,这种技术的优势开始出现。例如:
如你所见,我们已经应用了背景、边框、圆角、和阴影,它们都是可行的。nav > a { position: relative; display: inline-block; padding: .3em 1em 0; } 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,分别得到向左或向右倾斜的标签:
尽管它有这么多的有点,这种技术还是不够完美。它有一个非常重大的缺陷:侧边的角度取决于元素的宽度。因此。当处理不同的内容时,用相同的角度来得到梯形是非常棘手的。但是,对于宽度变化小的元素,它还是非常ok的,比如导航菜单,在这些情况下差异是难以察觉的。
【转载自:http://www.w3cplus.com/css3/css-secrets/trapezoid-tabs.html】