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

  • 相关阅读:
    自己设计的SSO登录流程图
    Java泛型:泛型类、泛型接口和泛型方法
    Java中泛型的各种使用
    Java总结篇系列:Java泛型
    java生成MD5校验码
    Android SQLite数据库之事务的学习
    Android SQLite详解
    android删除表和清空表
    Android 软键盘自动弹出和关闭
    java中表示二进制、八进制、十进制、十六进制
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6921060.html
Copyright © 2011-2022 走看看