jak utworzyć pusty trójkąt w css

Question

Chcę utworzyć pusty pusty trójkąt z CSS, ale nie mam tego pusty. Mogę utworzyć trójkąt z CSS, ale mam jeden problem i to jest: Nie mogę wydrążyć tego trójkąta.

To jest mój kod:

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

Niezupełnie cross-browser, ale działa. Mam nadzieję, że zrozumiałem twoją prośbę.

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

nie mam rozwiązanie, ale mam obejście z dwóch trójkąta FIDDLE

kod HTML

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

kod 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

Rozwidlenie off Rajesh kakawat - można uzyskać ten sam efekt z jednej 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: ''; 
    }