CSS에서 빈 삼각형을 만드는 방법

Question

CSS으로 중공 삼각형을 만들고 싶습니다. 그러나 그 방법을 비우는 방법은 없습니다. 내가 CSS와 삼각형을 만들 수 있지만 하나의 문제가 있고 이것은 :이 삼각형을 할로우 수 없습니다.

이

내 코드입니다 :

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

나는 해결책을 가지고하지 않습니다하지만 난 두 개의 삼각형 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

RAJESH kakawat를 포크 (fork) - 당신이 할 수있는 하나 개 사업부와 동일한 효과를 얻을 수 : 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: ''; 
    }