how to create Hollow triangle in css [duplicate] - css

Question

This question already has answers here:
How to create a transparent triangle with border using CSS?
(9 answers)
Closed 6 years ago.
I want create hollow triangle with CSS but I don't how to hollow that. I can create triangle with CSS but I have one problem and this is: I can't hollow this triangle.
This is my 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

Not exactly cross-browser but works. Hope I've understood your request.
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

I don't have solution but i have workaround with two triangle, 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

Forking off rajesh kakawat - you can get the same effect with one 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: '';
}