仅使用CSS就可以创建三角形吗？

Question

我曾尝试下面的CSS：

.triangle:after { 
    position:absolute; 
    content:""; 
    width: 0; 
    height: 0; 
    margin-top:1px; 
    margin-left:2px; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid white; 
} 

.triangle:before { 
    position:absolute; 
    content:""; 
    width: 0; 
    height: 0; 
    border-left: 12px solid transparent; 
    border-right: 12px solid transparent; 
    border-bottom: 12px solid black; 
} 

由于我不想去与SVG，有没有达到这个任何替代方法。

Answer 1

您可以使用下面的CSS：

.triangle { 
width: 0; 
height: 0; 
border-top: 100px solid #0099ff; 
border-left: 100px dashed transparent; 
border-right: 100px dashed transparent; 
border-bottom: 0; 
display: block; 
overflow: hidden; 
} 

您可以检查此演示http://leplay.github.com/demo/triangle.html