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

  • 相关阅读:
    Java:API文档;文档注释中的javadoc标记;官方API;自己动手给项目建一个API文档
    Java:配置环境(Mac)——MySQL
    Java:配置环境(Mac)——Tomcat
    Java:配置环境(Mac)——Eclipse;修改JDK版本后,Eclipse打不开
    Java:配置环境(Mac)——JDK
    Git:九、删除项目
    Git:修改Git Bash默认打开位置(win10)
    操作系统:diskpart常用指令(使用diskpart实现分区管理)
    人生第一次离职
    C++ std::thread概念介绍
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6921060.html
Copyright © 2011-2022 走看看