如何繪製帶有邊框的透明背景的三角形？

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