Можно ли создать треугольник с помощью 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