本文摘自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实现菜单按钮动画的代码示例
html如何选择li的偶数列
css modules是啥子东西？一起来了解一下！
css如何关闭浮动
css line-height属性怎么用
style标签怎么用？
css如何实现圆角内凹效果
css中隐藏的是什么命令
css怎么设置margin
利用css实现鼠标悬停效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 带你玩转css中各种方向小箭头
