带你玩转css中各种方向小箭头

在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

梯形代码：

html: <div class="arrow"></div> css: arrow{ width:10px; height:10px; border:10px solid #000; border-left-color:orange; }

把高宽设为0，其他边为透明颜色，三角形出来了：

html: <div class="arrow"></div> css: arrow{ width:0; height:0; border: 10px solid transparent; border-left-color: orange;//左箭头 }

在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。

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:''; }

现在追求平面化设计，还有另一种三角线箭头，更受欢迎。 设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好：

html: <div class="arrow">文字文字</div> 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中各种方向小箭头的详细内容，更多内容请关注技术你好其它相关文章！