[CSS揭秘]梯形标签页

梯形标签页是一种很常见的网页设计风格

然而现实中大部分实现方案都是利用伪元素来实现两边不平行的线条。 这种方式的弊端就在于可扩展性差，比如添加一圈边框，一层纹理背景，顶部设置圆角等。

今天就来介绍几种合理的解决方案

一、3D变换

当一个元素进行翻转时，如果加上景深perspective属性后会出现近大远小的效果。

但是3D旋转后，元素内部也会跟随外部一起进行旋转，而且内部的这种变形效应是不可逆转的。

解决方案只能是将变形效果作用于伪元素上。

 

TRAPEZOID

为了优化效果，可以调整变换中心点，即transform-origin属性。一种比较方便的解决方案就是将变换中心点设置在底部。即transform-origin: bottom;最后为了弥补标签页顶部的高度可以通过Y轴缩放来调整。

TRAPEZOID

最后展示一个梯形标签页实例

Home Projects About Content area

如果改变transform-origin属性可以得到左倾斜和右倾斜两种标签页

transform-origin: bottom left

transform-origin: bottom right

转载于:https://www.cnblogs.com/joyjoe/p/6921060.html