跳至内容
大螃嗨
好记性不如烂笔头
用户工具
登录
站点工具
搜索
工具
显示页面
修订记录
反向链接
最近更改
媒体管理器
网站地图
登录
>
最近更改
媒体管理器
网站地图
您的足迹:
•
playground
css特殊形状
本页面只读。您可以查看源文件,但不能更改它。如果您觉得这是系统错误,请联系管理员。
核心思路是使用[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements|伪元素]]+[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/border|border]] 核心思路是理解border的形状,是梯形。 分割线以下是详细说明 ------ 以下是HTML代码 <code html> <div > <a className={classes.item} href="#">{item}</a> </div> </code> 以下是JSS代码: <code jss> item: { display: 'block', float: 'left', height: 50, backgroundColor: '#e8f5e9', padding: '30px 40px 0px 40px', margin: '0px 10px 0px 0px', textAlign: 'center', position: 'relative', fontSize: 20, color: '#4caf50', textDecoration: 'none', '&:after': { content: '""', borderTop: '40px solid red', borderBottom: '40px solid blue', borderLeft: '40px solid yellow', borderRight: '40px solid green', position: 'absolute', right: -40, top: 0, }, }, </code> -------- 主要通过如下几个代码片段来说明边框: <code jss> '&:after': { content: '""', borderTop: '40px solid red', borderBottom: '40px solid blue', borderLeft: '40px solid yellow', borderRight: '40px solid green', position: 'absolute', right: -40, top: 0, }, </code> {{:wiki:css特殊形状1.jpg|}} -------- <code jss> '&:after': { content: '"🦀️"', borderTop: '40px solid red', borderBottom: '40px solid blue', borderLeft: '40px solid yellow', borderRight: '40px solid green', position: 'absolute', right: -40, top: 0, }, </code> {{:wiki:css特殊形状2.jpg|}} -------- <code jss> '&:after': { content: '"🦀️"', borderTop: '40px solid red', borderBottom: '40px solid blue', borderLeft: '40px solid yellow', position: 'absolute', right: -40, top: 0, }, </code> {{::css特殊形状3.jpg|}} -------- <code jss> '&:after': { content: '""', borderTop: '40px solid red', borderBottom: '40px solid blue', borderLeft: '40px solid yellow', position: 'absolute', right: -40, top: 0, }, </code> {{::css特殊形状4.jpg|}}
css特殊形状.txt
· 最后更改: 2020/01/02 03:16 由
螃蟹
页面工具
显示页面
修订记录
反向链接
回到顶部