Làm thế nào để vẽ hình tam giác với nền trong suốt với đường viền?

Question

Tôi muốn biết cách vẽ hình tam giác với nền trong suốt có đường viền? Các ví dụ tôi đã tìm thấy không cung cấp biên giới. Bất kỳ cách nào để thực hiện điều này?

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

Hoàn toàn định vị hình tam giác hơi nhỏ hơn trên hình tam giác hiện có.

Answer 3

Nó tam giác với nền trong suốt, giáp bạn có thể làm bằng hai trong số các chồng lên nhau http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

Dưới đây là một minh bạch tinh khiết css tam giác với biên giới:

.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