wie man hohle Dreieck in css

Question

erstellen Ich möchte Hohldreieck mit CSS erstellen, aber ich weiß nicht, wie man das aushöhlen. Ich kann Dreieck mit CSS erstellen, aber ich habe ein Problem und das ist: Ich kann dieses Dreieck nicht aushöhlen.

Dies ist mein Code:

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

Nicht gerade Cross-Browser funktioniert aber. Hoffe, ich habe deine Bitte verstanden.

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

Ich habe Lösung nicht, aber ich habe Abhilfe mit zwei Dreieck, FIDDLE

HTML CODE

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

CSS CODE

#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 Forking aus - Sie den gleichen Effekt mit einem div bekommen: 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: ''; 
    }