带你玩转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中各种标的目的小箭头的具体内容，更多请关注百分百源码网其它相关文章！