Треугольник с белой рамкой

Question

Как создать треугольник с белой рамкой с помощью CSS? Как изображение ниже.

, когда я добавить этот CSS

.triangle { 
    width:0; 
    height:0; 
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent; 
    position:relative; 

} 
.triangle:before { 
    content:''; 
    width:0; 
    height:0; 
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent; 
    position:absolute; 
    top:-10px; 
    left:-17px; 
} 

результат

Answer 1

CSS:

.triangle { 
    width:0; 
    height:0; 
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent; 
    position:relative; 

} 
.triangle:before { 
    content:''; 
    width:0; 
    height:0; 
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent; 
    position:absolute; 
    top:-10px; 
    left:-17px; 
} 

HTML:

<div class="triangle"></div> 

Fiddle