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

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

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

嵌套元素解决方案

结构点击我

风格 .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中文网

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

多iframe下的html同名id,获得同级iframe页面的指定ID元素的几种实现方法
1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...
selenium+python，解决selenium弹出新页面，无法定位元素的问题（报错：Unable to locate element:元素）
selenium+python,解决selenium弹出新页面,无法定位元素的问题(报错:Unable to locate element:元素) 参考文章: (1)selenium+python,解 ...
JavaScript如何查找和访问HTML页面中的HTML元素
JavaScript如何查找和访问HTML页面中的HTML元素 HTML语言中,全部是由标签(标记.tag)组成的.在浏览器内部解析HTML标记时,会转换为成具有特定结构的HTML文档对象模型,这个对 ...
在vue页面中使用伪元素进行气泡框创建|选中效果自定义|滚动条自定义
在vue页面中使用伪元素进行气泡框|单选框自定义|滚动条自定义 1. 基于vue,使用到的图标是element plus 2. vue单页面代码 <template><h1> ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
HTML页面中解决内容元素随窗口变化布局变乱问题
1.给body加上一个min-width最小宽度,以px为单位,这样当页面变小时,当达到你所设置的最小宽度,body的宽度不再改变,超出的部分会用横向滚动条显示,其内所有元素的布局也不会受影响. 2. ...
实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 除了display.visibility.opacity三个属性可以隐藏元素之外,是否还存 ...
Webview页面的控件元素定位
前言现在有很多App都是Hybrid的,即有原生的页面又有Webview的页面,元素的可以通过uiautomatorviewer工具进行控件元素的定位,Webview页面的则无法通过此方式定位,而 ...
当前元素_前端系列——获取页面中的DOM元素
这里就聊一下获取页面中DOM元素最基本的两种方法: document.getElementById. 在整个页面中通过元素的Id属性值来获取到这个元素对象,getElementById是获取元素的方法 ...

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

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

最新文章

热门文章