在写页面的时候我们总会遇见各式各样的箭头,但是自己写的又不那么美观,所以说我们自己可以用css画箭头,以下是我们要画的箭头,就画简单的吧左右箭头
1 <div class="box"> 2 <div class="arrow-right arrow-box"> 3 <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b> 4 </div> 5 <div class="arrow-left arrow-box" > 6 <b class="left"><i class="left-arrow1"></i><i class="left-arrow2"></i></b> 7 </div> 8 </div>
css的样式
1 .box{width:100px;height:500px;margin:0 auto;background:white;} 2 .arrow-box{width:30px;height:30px;margin:20px auto;position:relative;} 3 /*右箭头*/ 4 .right{width:20px;height:20px;position:absolute;left:0;top:0;} 5 .right-arrow1,.right-arrow2{width:0;height:0;display:block;position:absolute;left:0;top:0;border-top:10px transparent dashed;border-right:10px transparent dashed;border-bottom:10px transparent dashed;border-left:10px white solid;overflow:hidden;} 6 .right-arrow1{left:1px;border-left:10px #ddd solid;} 7 .right-arrow2{border-left:10px white solid;} 8 /*左箭头*/ 9 .left{width:20px;height:20px;position:absolute;left:0;top:0;z-index: 2;} 10 .left-arrow1,.left-arrow2{width:0;height:0;display:block;position:absolute;left:0;top:0;z-index:5;border-top:10px transparent dashed;border-left:10px transparent dashed;border-bottom:10px transparent dashed;border-right:10px white solid;overflow:hidden;} 11 .left-arrow1{border-right:10px #ddd solid;} 12 .left-arrow2{left:1px;border-right:10px white solid;}
简单的写了两个,上下箭头原理是一样的