zoukankan      html  css  js  c++  java
  • [CSS揭秘]平行四边形

    技巧:通过变形属性对容器的形状进行变形,但是保持其内容不变形。

    场景:通过skew()变形属性对一个按钮形状的平行四边形进行斜向拉伸。

    有几套备选方案:

    1. 嵌套元素方案

    外部容器元素进行skew()变形,再对内部内容区域元素进行一次反向的skew()变形,这样内容区域会保持原来的形状。

    2. 伪元素方案(二个)

    通过在元素两边添加两个三角形的伪元素来拼接实现一个斜向拉伸的平行四边形。

    3. 伪元素方案(一个)

    把所有的样式(背景,边框等)都应用到伪元素之上,而且对伪元素进行变形。

    这个技巧适用于任何变形样式:只想变形一个元素而不想变形元素的内容。

    技巧使用场景:

    1. 多重背景

    2. 边框内圆角

    3. 多重边框

    参考案例地址

    play.csssecrets.io/parallelograms

    play.csssecrets.io/parallelograms-pseudo

  • 相关阅读:
    GNU C的定义长度为0的数组
    Ubuntu如何启用双网卡
    DQN 文章第一篇
    awk用法
    Linux下C结构体初始化
    Linux kernel中的list怎么使用
    从美剧中学(1)
    Python @property 属性
    p40_数据交换方式
    3.TCP协议
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6115806.html
Copyright © 2011-2022 走看看