come creare un triangolo vuoto in css

Question

Voglio creare un triangolo vuoto con CSS ma non so come farlo. Posso creare un triangolo con CSS ma ho un problema e questo è: non riesco a svuotare questo triangolo.

Questo è il mio codice:

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

Non

esattamente cross-browser, ma funziona. Spero di aver capito la tua richiesta.

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

non ho la soluzione, ma ho soluzione con due triangolo, FIDDLE

CODICE HTML

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

codice 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

forking kakawat Rajesh - si può ottenere lo stesso effetto con un 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: ''; 
    }