四川盐亭网站制作公司

如何使用css中各种方向小箭头-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

成都创新互联公司，为您提供成都网站建设、重庆网站制作、网站营销推广、网站开发设计，对服务汽车玻璃修复等多个行业拥有丰富的网站建设及推广经验。成都创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

本篇文章为大家展示了如何使用css中各种方向小箭头，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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

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

梯形代码：
如何使用css中各种方向小箭头

html:


css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

把高宽设为0，其他边为透明颜色，三角形出来了：
如何使用css中各种方向小箭头

html:


css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。
如何使用css中各种方向小箭头

html:

文字文字

css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:'';
}

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

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

上述内容就是如何使用css中各种方向小箭头，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联-成都网站建设公司行业资讯频道。


文章名称：如何使用css中各种方向小箭头-创新互联
分享网址：http://scyanting.com/article/egegd.html

其他资讯