码迷,mamicode.com
首页 > Web开发 > 详细

css箭头

时间:2019-09-14 13:27:56      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:sdn   inf   箭头   csdn   方向   mda   sky   png   das   

直接上代码:
 
<div class="box">        
    
    <p>向上箭头</p>       
    <div class="to_top"></div>       
    <p>向左箭头</p>        
    <div class="to_left"></div>        
    <p>向右箭头</p>        
    <div class="to_right"></div>        
    <p>向下箭头</p>        
    <div class="to_bottom"></div>    
    </div>
     

html

.box {            
width: 400px;            
height: 100px;            
text-align: center;            
margin: 50px auto;        
}         
.box p {            
background: pink;       
 }        
 /* 向上箭头 */         
.to_top {            
width: 0;            
height: 0;            
border-bottom: 30px solid #f0f;            
border-left: 30px solid transparent;            
border-right: 30px solid transparent;        
}        
 /* 向左箭头 */         
.to_left {            
width: 0;            
height: 0;            
border-right: 30px solid #ffd900;            
border-top: 30px solid transparent;            
border-bottom: 30px solid transparent;        
}         
/* 向右箭头 */         
.to_right {            
width: 0;            
height: 0;            
border-left: 30px solid greenyellow;            
border-top: 30px solid transparent;            
border-bottom: 30px solid transparent;        
}         
/* 向下箭头 */         
.to_bottom {            
width: 0;            
height: 0;            
border-top: 30px solid skyblue;            
border-left: 30px solid transparent;            
border-right: 30px solid transparent;        
}

 

最终效果:
技术图片

 

 


当然你可以根据你的需求调整箭头的方向,颜色,大小等参数。
————————————————
 
 
 
版权声明:本文为CSDN博主「wei_bo_ren」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/github_37772805/article/details/78535116
 
 
 
 
 

css箭头

标签:sdn   inf   箭头   csdn   方向   mda   sky   png   das   

原文地址:https://www.cnblogs.com/strawberry-1/p/11518818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!