zoukankan      html  css  js  c++  java
  • [CSS揭秘]梯形标签页

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

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

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

    一、3D变换

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

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

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

    TRAPEZOID

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

    TRAPEZOID

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

    Content area

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

    transform-origin: bottom left

    transform-origin: bottom right

  • 相关阅读:
    我对管理信息系统定位的理解
    正斜杠和反斜杠-windows、web、c语言大讨论
    java异常处理的两种方法
    使用throws抛出异常
    课后作业
    每日自学
    《梦断代码》读后感
    每日自学
    每日自学
    每日自学
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6921060.html
Copyright © 2011-2022 走看看