순수 CSS로 그려진 삼각형 화살표 패턴

div#up { 
너비: 0px; 
높이: 0px; 
테두리 왼쪽: 5px 투명 투명; 
테두리 오른쪽: 5px 투명 투명; 
테두리 하단: 5px solid#2f2f2f; 
} 
div#down { 
너비: 0px; 
높이: 0px; 
테두리 왼쪽: 20px 투명 투명; 
테두리 오른쪽: 20px solidtransparent; 
테두리 상단: 20px 솔리드 #f00; 
} 
div#left { 
너비: 0px; 
높이: 0px; 
테두리 상단: 10px 투명 투명; 
border-bottom: 10px 솔리드 투명; 
테두리 오른쪽: 10px 단색 노란색; 
} 
div#right { 
너비: 0px; 
높이: 0px; 
테두리 상단: 60px 투명 투명; 
border-bottom: 60px 솔리드 투명; 
테두리 왼쪽: 60px 단색 녹색; 
} 


html: