Twitter Bootstrap 風のキャレットの作り方

caret です。つまり、「▼」的なやつですが、Twitter Bootstrap ではこれを CSS だけで実現してたのでメモです。Twitter Bootstrap では dropdown メニューにつけてたりとかしてます。

<b class="caret"></b>
<style type="text/css">
.caret {
  border-top:   solid 4px #000;
  border-left:  solid 4px transparent;
  border-right: solid 4px transparent;
}
</style>

これだけです。

スクリーンショット:

border-top を bottom にすれば上向きのやつをつくれるし、 4px のやつを大きくすれば大きな三角が作れるし、left/right を #000 にして top と bottom を transparent にすると横向きのやつがつくれます。

どういう原理かは大きくして色をつけてみればよくわかる気がします。

  border-top:   solid 80px #000;
  border-left:  solid 80px #0f0;
  border-right: solid 80px #f00;