如何绘制带有边框的透明背景的三角形？

Question

我想知道如何绘制带有边框的透明背景的三角形？我发现的例子不提供边界。任何方式来完成这个？

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

绝对在现有的一个稍小的三角形。

Answer 3

它的三角形透明背景，边框可以使用两种这些一个接一个的 http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

以上的下面是一个透明的纯CSS三角形边框做：

.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