在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。
原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了
梯形代码： 
html:css:arrow{width:10px;height:10px;border:10px solid #000;border-left-color:orange;}
登录后复制
把高宽设为0，其他边为透明颜色，三角形出来了： 
立即学习“前端免费学习笔记（深入）”；
html:css:arrow{width:0;height:0;border: 10px solid transparent;border-left-color: orange;//左箭头}
登录后复制
在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。 
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; }
登录后复制
may you like it.
感谢大家的阅读，希望大家收益多多。
本文转自：https://blog.csdn.net/qq_34250472/article/details/55513862
推荐教程：《CSS教程》
以上就是带你玩转css中各种方向小箭头的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2885313.html
