首页 > 代码库 > [CSS揭秘]平行四边形
[CSS揭秘]平行四边形
技巧:通过变形属性对容器的形状进行变形,但是保持其内容不变形。
场景:通过skew()变形属性对一个按钮形状的平行四边形进行斜向拉伸。
有几套备选方案:
1. 嵌套元素方案
外部容器元素进行skew()变形,再对内部内容区域元素进行一次反向的skew()变形,这样内容区域会保持原来的形状。
2. 伪元素方案(二个)
通过在元素两边添加两个三角形的伪元素来拼接实现一个斜向拉伸的平行四边形。
3. 伪元素方案(一个)
把所有的样式(背景,边框等)都应用到伪元素之上,而且对伪元素进行变形。
这个技巧适用于任何变形样式:只想变形一个元素而不想变形元素的内容。
技巧使用场景:
1. 多重背景
2. 边框内圆角
3. 多重边框
参考案例地址
play.csssecrets.io/parallelograms
play.csssecrets.io/parallelograms-pseudo
[CSS揭秘]平行四边形
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。