Triangular arrow pattern drawn with pure CSS

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: