draw a triangle in css which have only borders

Question

I am trying to draw a triangle in css which contain only borders. no background colors.

.arrow {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 20px solid #000;
height: 0;
width: 0px;
}

The above code gives me a triangle with #000 as background colors. i just want the triangle borders.

Duplicate: stackoverflow.com/questions/16231184/create-a-triangle-with-css — dlock
– dlock, Commented Dec 4, 2013 at 4:37

Patrick · Accepted Answer · 2013-12-04 04:39:20Z

1

.arrow:after {
 content: '\25c1';
 display: inline-block;
}

answered Dec 4, 2013 at 4:39

Patrick

14k5 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

will this have support across all browser?

It's not going to work on lynx or anything, but generated content works great on most browsers - caniuse.com/#feat=css-gencontent