Twitter Bootstrap sideways caret

Question

I'm using Twitter Bootstrap and some custom css (found here) to have dropdown menus open up on mouseover.

I am using the "caret" on a on the root menu items to show the user there is more options available, I would like to use a sideways version of this for the sub menus, in that example they use a -> image however I don't think it really fits in with the rest of the UI.

I've also tried the play icon twitter has but it doesn't quite match either.

Answer 1

Just switch up the borders (see fiddle):

HTML

<b class="caret-right"></b>

CSS

.caret-right {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: top;
    width: 0;
}

Answer 2

I do it by adding a class that simply modifies the border styles to point the caret to the right. That way you can toggle a caret right/down by adding/removing the modifying class.

HTML:

<span class='caret caret-right'></span>

CSS:

.caret-right {
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
}