Create a Thin Caret with HTML and CSS

The carets are popular as hints for dropdown lists: one clicks on them for more options to the one displayed. They are replacing the select form elements more and more, as can be styled easily across browsers.

Check the caret app to create the markup on the browser.

HTML

The markup is simple, just a span:

<span class="caret"></span>

CSS

The styles are taken from Bootstrap:

.caret {
  position: relative;
  cursor: pointer;
}

The span is just a container for the pseudo element we'll add before:

.caret:before {
  content: '';
  position: absolute;
  top: 25%;
  left: 12px;
  border-top: 12px solid #999;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

Now our caret looks like this:

To make the caret thin we will add another triangle on top of the current one with the same color as the page background:

.caret:after {
  content: '';
  position: absolute;
  top: 25%;
  left: 13px;
  border-top: 11px solid #fff;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
}

And a bit of hover style:

.caret:hover:before {
  border-top-color: #222;
}

Now the caret looks like this:

Since we are only using HTML and CSS, we can style the carets as we like, we can change their color, size, markup, as we see fit.