如何使用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://pwwzsj.com/article/egegd.html