Come disegnare un triangolo con sfondo trasparente con bordo?

Question

Mi piacerebbe sapere come disegnare un triangolo con uno sfondo trasparente con bordi? Gli esempi che ho trovato non forniscono confini. Qualche modo per realizzare questo?

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

Posizionare assolutamente un triangolo leggermente più piccolo su uno esistente.

Answer 3

Si triangolo con uno sfondo trasparente, le frontiere si può fare usando due di questi uno sopra l'altro http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

Ecco un triangolo css puro trasparente con bordi:

.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