元素形状之“平行四边形”_html/css_WEB-ITnose
程序员文章站
2022-05-14 17:04:20
...
设计场景
- 在视觉设计中,平行四边形往往可以传达出一种 动感
- 只让容器的形状倾斜,而保持其内容不变
嵌套元素解决方案
结构
点击我
风格
.button { display: inline-block; padding: 16px 32px; background-color: #58a; color: #fff; text-decoration: none; transform: skew(-45deg);}.button > div { transform: skew(45deg);}
说明:该方法虽然实现设计,但需要添加一层额外的HTML结构
伪元素解决方案
结构
点击我
风格
.button { position: relative; display: inline-block; padding: 6px 32px; color: #fff;}.button::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #58a; transform: skew(45deg);}
说明:所有的偏移量都设为零,目的是让它在水平和垂直方向上都被拉伸至主元素的尺寸;该方法 适用于其他任何变形样式,当我们 想变形一个元素而不想变形它的内容 时就可以用到它
《CSS SECRETS》
推荐阅读
-
html5小技巧之通过document.head获取head元素
-
HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
-
js坚持不懈之16:使用js向HTML元素分配事件
-
HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
-
HTML5学习笔记简明版(2):新元素之section,article,aside
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
-
HTML5实战与剖析之媒体元素(2、媒体元素的属性)
-
HTML 笔记之 HTML 元素
-
Jquery简单入门到精通细节 - (十五)Jquery HTML之“删除元素”
-
HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)