css空心三角形,如何在css中创建空心三角形

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:

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;

}

解决方案

Not exactly cross-browser but works. Hope I've understood your request.

.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;

}