How is the caret on Twitter Bootstrap constructed?

Question

This is more of a curiosity question than something I really need to know.

On this page:

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

How is the little caret / down arrow thing constructed? Poking around with Firebug it looks like it's just made with transparent borders but ... I must be missing something.

Bootstrap is very cool. I just got it going with Symfony.

Jason · Accepted Answer · 2013-01-18T18:37:06.033

33

It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.

How to do it:

.foo:before {
    content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      border: 10px solid transparent;
      border-left-color: #333;
}

http://jsfiddle.net/fGSZx/

Here are some resources to help:

CSS Triangle from CSS-Tricks (this should clear everything up)

Smashing Mag article about :before and :after

edited Jan 18 '13 at 18:37

answered Jan 18 '13 at 18:10

Jason

3,330
1
33
38

4

Thanks. Even after reading that second link it took me a while to get it. I was missing the now obvious fact that when borders meet at a corner, their edges are sliced off at 45 degrees so that they fit together without overlapping. Here's another link with more tricks. http://jonrohan.me/guide/css/creating-triangles-in-css/ – tetranz Jan 18 '13 at 19:11
Someone opened an issue about changing the caret on the [Github page](https://github.com/twitter/bootstrap/issues/2526) which provides some background for you from the authors of TW-BS – tatlar Jan 25 '13 at 20:01
I hope you all have seen this glorious post. http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work – approxiblue Jul 02 '13 at 04:38

score 4 · Answer 2 · edited Jul 23 '14 at 01:06

4

Here is the CSS for an upward facing caret, based on the CSS from bootstrap:

.caret-up {
  display: inline-block;
  width: 0px;
  height: 0px;
  margin-left: 2px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 4px solid #FFFFFF;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top-width: 0px;
  border-top-style: dotted;
  content: "";
}

edited Jul 23 '14 at 01:06

Scott Stafford

43,764
28
129
177

answered Sep 19 '13 at 20:06

Ryan H

83
5

How is the caret on Twitter Bootstrap constructed?

2 Answers2

Linked