純粋なCSSで描かれた三角形の矢印パターン

div#up {
width: 0px; 
高さ: 0px; 
border-left: 5 ピクセルの実線透明。 
border-right: 5 ピクセルの実線透明。 
border-bottom: 5px ソリッド#2f2f2f; 
}
div#down {
width: 0px; 
高さ: 0px; 
border-left: 20 ピクセルの単色透明。 
border-right: 20px ソリッド透明; 
border-top: 20px ソリッド #f00; 
}
div#left {
width: 0px; 
高さ: 0px; 
border-top: 10 ピクセルの単色透明。 
border-bottom: 10 ピクセルの単色透明。 
border-right: 10px ソリッドイエロー; 
}
div#right {
width: 0px; 
高さ: 0px; 
border-top: 60 ピクセルのソリッド透明。 
border-bottom: 60 ピクセルのソリッド透明。 
border-left: 60 ピクセルの緑の実線。 
}


html: