Cómo dibujar triángulo con fondo transparente con borde?

Question

Me gustaría saber cómo dibujar un triángulo con un fondo transparente con bordes? Los ejemplos que encontré no proporcionan fronteras. Cualquier forma de lograr esto?

Answer 1

Demo

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
    position:relative; 
} 
.triangle:after{ 
    content:''; 
    position:absolute; 
    top:5px; 
    left:-45px; 
    width: 0; 
    height: 0; 
    border-left: 45px solid transparent; 
    border-right: 45px solid transparent; 
    border-bottom: 92px solid white; 
} 

Answer 2

Coloque un triángulo ligeramente más pequeño sobre uno existente.

Answer 3

Se triángulo con un fondo transparente, las fronteras se puede hacer uso de dos de estos uno por encima del otro http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

Aquí hay un triángulo css puro transparente con fronteras:

.container { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    border-top: 4px solid #e74c3c; 
} 

.triangle { 
    position: absolute; 
    margin: auto; 
    top: -70px; 
    left: 0; 
    right: 0; 
    width: 137px; 
    height: 137px; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    border-right: 4px solid #e74c3c; 
    border-bottom: 4px solid #e74c3c; 
} 

Demo