HTML页面多个平行四边形,元素形状之“平行四边形”_html/css_WEB-ITnose

设计场景 在视觉设计中，平行四边形往往可以传达出一种 动感

只让容器的形状倾斜，而保持其内容不变

嵌套元素解决方案

结构 点击我

风格 .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》

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网