cssで中空三角形を作成する方法

Question

CSSで中空三角形を作成したいのですが、それを中空にする方法はありません。私はCSSと三角形を作成することができますが、私は1つの問題があり、これは：私はこの三角形を中空にすることはできません。

これは私のコードです：

HTML：

<div id="tringle"></div> 

CSS：

#tringle { 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: 50%; 
    left: 7px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 7px solid white; 
} 

Answer 1

ない正確にクロスブラウザが、作品。あなたのご要望を理解していただきたいと思います。

http://jsfiddle.net/wmDNr/3/

.triangle { 
    position: relative; 
    width: 20px; 
    margin-top: 100px; 
} 
.triangle>div { 
    width: 20px; 
    height: 2px; 
    background: red; 
    margin-top: 100px; 
} 

.triangle>div:before { 
    content: " "; 
    display: block; 
    width: 20px; 
    height: 2px; 
    background: red; 
    -webkit-transform: rotate(56deg); 
    -moz-transform: rotate(56deg); 
    -ms-transform: rotate(56deg); 
    transform: rotate(56deg); 
    position: absolute; 
    top: -8px; 
    right: -5px; 
} 
.triangle>div:after { 
    content: " "; 
    display: block; 
    width: 20px; 
    height: 2px; 
    background: red; 
    -webkit-transform: rotate(-56deg); 
    -moz-transform: rotate(-56deg); 
    -ms-transform: rotate(-56deg); 
    transform: rotate(-56deg); 
    position: absolute; 
    top: -8px; 
    left: -5px; 
} 

Answer 2

私は解決策を持っていませんが、私は2つの三角形と回避策を持っている、FIDDLE

HTMLコード

<div id="tringle"></div> 
<div id="tringle2"></div> 

CSSコード

#tringle { 
     left:10px; 
     width: 0; 
     height: 0; 
     border-left: 100px solid transparent; 
     border-right: 100px solid transparent; 
     border-bottom: 100px solid black; 
    } 
    #tringle2 { 

     left:10px; 
     width: 0; 
     height: 0; 
     border-left: 50px solid transparent; 
     border-right: 50px solid transparent; 
     border-bottom: 50px solid #FFF; 
     left: 57px; 
     position: absolute; 
     top: 38px; 

    } 

Answer 3

ラジェッシュkakawatをオフフォーク - あなたは1つのdivと同じ効果を得ることができます。私の友人は多分あなたを助けるこの記事を見てhttp://jsfiddle.net/aDcTb/

<div id="triangle"></div> 

#triangle { 
     left:10px; 
     width: 0; 
     height: 0; 
     border-left: 100px solid transparent; 
     border-right: 100px solid transparent; 
     border-bottom: 100px solid black; 
    } 
    #triangle:after { 
     left:10px; 
     width: 0; 
     height: 0; 
     border-left: 50px solid transparent; 
     border-right: 50px solid transparent; 
     border-bottom: 50px solid #FFF; 
     left: 57px; 
     position: absolute; 
     top: 38px; 
     content: ''; 
    }