本文摘自PHP中文网,作者烟雨青岚,侵删。
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用。
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了
梯形代码:
1 2 3 4 5 6 7 8 9 | html:
<div class = "arrow" ></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}
|
把高宽设为0,其他边为透明颜色,三角形出来了:
1 2 3 4 5 6 7 8 9 | html:
<div class = "arrow" ></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
}
|
在开发中,可以利用伪类,定位实现,不改变dom结构,简洁优雅。content提供给三角形的位置,这个属性不能少。
1 2 3 4 5 6 7 8 9 10 11 12 13 | html:
<div class = "arrow" >文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content: '' ;
}
|
现在追求平面化设计,还有另一种三角线箭头,更受欢迎。
设置两个伪类,前一个伪类覆盖至另一个了伪类,留出一些线出来就好:
阅读剩余部分
相关阅读 >>
css全称是什么意思
css控制ul和li的样式的分析(代码)
style标签的作用是什么
css怎么设置网页标题栏图标
css中添加阴影的方法有哪些
css怎么设置按钮边框的颜色
css多级菜单的实例代码讲解
css比html更复杂为什么还要用?
css行元素跟块元素有哪些相同点
:nth-child(n)的作用是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 带你玩转css中各种方向小箭头