在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。
原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了
梯形代码：
把高宽设为0，其他边为透明颜色，三角形出来了：
立即学习
“
前端免费学习笔记（深入）
”；
在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
现在追求平面化设计，还有另一种
三角线箭头
，更受欢迎。
设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好：
may you like it.
感谢大家的阅读，希望大家收益多多。
本文转自：https://blog.csdn.net/qq_34250472/article/details/55513862
推荐教程：《
CSS教程
》
html:
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}html:
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}html:
文字文字
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:'';
}html:
文字文字
CSS:
div {
position: relative;
}
.arrow:after,.arrow:before {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: orange;
position: absolute;
content: "";
}
.arrow:before{
top: 0;
left: 70px;//根据实际情况调整
border-left-color: white;
}