[css]画像を使わずにcssだけで矢印を作る方法

この図のような矢印を、画像を使わずにcssだけで作ってみたいと思います。上のとがった部分と、下の棒の部分を切り分けて作る、というのが基本的な考え方です。

上向き矢印の作り方

まずは、html部分を作ります。といっても、div要素だけです。

<div class="up"></div>

次に、上のとがった部分を作ります。高さ0、幅0の要素に、borderを設定すれば作ることができます。この方法は、以前にも紹介したことがあるので、そのリンクを貼っておきます。[css][/css]折り返しリボンの作り方を解説するよ

.up{
  position: relative;
  width:0;
  height:0;
  border: 16px solid transparent;
  border-bottom-color: #999;
}

この時点では、図のようになっています。上のとがった部分が出来上がっているのがわかりますね。ここでは、borderの幅を16pxとしています。ですので、高さが16pxで幅が32pxの三角形ができています。

次に、矢印の棒の部分を作ります。これは、:after疑似要素で処理します。位置は、上のとがった部分の先端が基準になるので、topを16pxとします。棒の部分を16pxの幅にするので、leftを-8pxとします。これらを踏まえ、cssを次のようにします。

.up:after{
  position: absolute;
  content: '';
  top: 16px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: #999;
}

これで、矢印が完成です。

上向き以外の矢印の作り方

上向きの矢印を作りましたが、他の向きも基本的な作り方は同じです。とがっている部分は、上下左右の一か所だけborderの色を設定して作ります。設定する箇所は、とがっているのと反対のところです。つまり、左向きなら、border-rightに色を設定します。棒の部分は、とがっている先端から計算して、topとleftを設定します。

それぞれ、cssを書いておきます。まずは、下向きから。

.down{
  position: relative;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: #999;
}

.down:after{
  position: absolute;
  content: '';
  top: -32px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: #999;
}

続いて、左向きの矢印です。

.left{
  position: relative;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-right-color: #999;
}

.left:after{
  position: absolute;
  content: '';
  top: -8px;
  left: 16px;
  width: 16px;
  height: 16px;
  background: #999;
}

そして最後に右向きの矢印です。

.right{
  position: relative;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-left-color: #999;
}

.right:after{
  position: absolute;
  content: '';
  top: -8px;
  left: -32px;
  width: 16px;
  height: 16px;
  background: #999;
}

前の記事：

[wordpress]管理画面の右下に現在のバージョンも表示させたい

次の記事：

[excel]階段状の面グラフを作る