首页  >  文章  >  web前端  >  纯CSS绘制的三角形箭头图案

纯CSS绘制的三角形箭头图案

巴扎黑
巴扎黑原创
2016-11-25 14:19:021757浏览

div#up { 
width: 0px; 
height: 0px; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
border-bottom: 5px solid#2f2f2f; 

div#down { 
width: 0px; 
height: 0px; 
border-left: 20px solid transparent; 
border-right: 20px solidtransparent; 
border-top: 20px solid #f00; 

div#left { 
width: 0px; 
height: 0px; 
border-top: 10px solid transparent; 
border-bottom: 10px solid transparent; 
border-right: 10px solidyellow; 

div#right { 
width: 0px; 
height: 0px; 
border-top: 60px solid transparent; 
border-bottom: 60px solid transparent; 
border-left: 60px solid green; 



html: 

 
 
 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn