有没有办法创建纯粹的CSS2跨浏览器三角形？

Question

就像在标题中说的那样，是否有人知道在不使用图像的情况下使用CSS2（而不是CSS3）制作三角形的技巧？

Answer 1

一个良好的网站 - 一个小小要求将给你答案：

http://css-tricks.com/snippets/css/css-triangle/

.arrow-up { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 5px solid transparent; 
 
\t border-right: 5px solid transparent; 
 
\t 
 
\t border-bottom: 5px solid black; 
 
} 
 

 
.arrow-down { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 20px solid transparent; 
 
\t border-right: 20px solid transparent; 
 
\t 
 
\t border-top: 20px solid #f00; 
 
} 
 

 
.arrow-right { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 60px solid transparent; 
 
\t border-bottom: 60px solid transparent; 
 
\t 
 
\t border-left: 60px solid green; 
 
} 
 

 
.arrow-left { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 10px solid transparent; 
 
\t border-bottom: 10px solid transparent; 
 
\t 
 
\t border-right:10px solid blue; 
 
}

<div class="arrow-up"></div> 
 
<div class="arrow-down"></div> 
 
<div class="arrow-left"></div> 
 
<div class="arrow-right"></div>