🕒 2013/03/03
🔄 2023/04/22
[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]階段状の面グラフを作る