Triangle with CSS with border

Question

Firstly here's the fiddle: http://jsfiddle.net/krish7878/kuG6X/3/

I need a css triangle with just a border for a text bubble, the background should be transparent.

Code:

HTML:<div class="arrow-up"> </div>

CSS:

.arrow-up {
  position:absolute;
  top:50px;
  left:5px;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 42px solid transparent;
  border-top: 42px solid black;
  margin: 10px; 
  -ms-transform: rotate(315deg); /* IE 9 */
  -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
  transform: rotate(315deg);
}

Isn't that exactly what you have already? Edit: My apologies, got it now. — jjjjjjjjjjjjjjjjjjjj, Aug 01 '14 at 14:43
@JanneKlouman OP has a triangle with a black background color. OP wants only a border. — putvande, Aug 01 '14 at 14:44
This might help ... http://stackoverflow.com/questions/16237181/how-to-add-bordered-triangle-over-a-div-tag — jleggio, Aug 01 '14 at 14:45
Are you looking for something like [this](http://jsfiddle.net/kuG6X/9/)? This doesn't need any extra pseudo elements. This doesn't have a border on one of the sides but as you are looking to use it in a bubble you would probably not need a border for that side. — Harry, Aug 01 '14 at 14:47
I was looking for a cross-browser solution, hallow triangle question is very much similar. Thank you. — chandan, Aug 01 '14 at 15:15

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Someone already posted a pretty good answer to this question: https://stackoverflow.com/a/18607208/1320911

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

You should have marked it as duplicate.. not copy someone else's answer. — putvande, Aug 01 '14 at 15:09
Thank you @Luke, I guess I did not search with the right keyword — chandan, Aug 01 '14 at 15:09

score 0 · Answer 2 · answered Aug 01 '14 at 15:10

why do you need to use css? It's just bytes. Use the html special geometric shapes for triangles:

Normal Triangle: &#9651;
Right Showing Triangle:  &#9655;  
Down Pointing Triangle: &#9661; 
Left Pointing Triangle: &#9665;

It saves lot of your effort and faster over the Internet.

⚠: Check the Brower Compatibility

Full Geometric Reference: http://www.alanwood.net/unicode/geometric_shapes.html

Triangle with CSS with border

2 Answers2