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

  • 相关阅读:
    leetcode -- Triangle
    leetcode difficulty and frequency distribution chart
    leetcode -- Sqrt(x)
    leetcode -- Climbing Stairs
    leetcode -- Populating Next Right Pointers in Each Node II
    leetcode -- Populating Next Right Pointers in Each Node
    ThreadLocal
    Thread
    进程或者线程状态
    ThreadGroup
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6921060.html
Copyright © 2011-2022 走看看