Jak narysować trójkąt z przezroczystym tłem z obramowaniem?

Question

Chciałbym wiedzieć, jak narysować trójkąt z przezroczystym tłem z ramkami? Przykłady, które znalazłem, nie zawierają granic. Jakikolwiek sposób to osiągnąć?

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

Absolutnie ustaw nieco mniejszy trójkąt na istniejącym.

Answer 3

To trójkąt z przezroczystym tłem, graniczy można zrobić za pomocą dwóch z tych jedna nad drugą http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

Oto przejrzysty czystym css trójkąt z granicami:

.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