良く見かける、ボタンのなかにある三角形のアイコン。

画像で作っても良いのですが、色の種類があったりで、photoshop書き出しすのも手間ですし、cssのほうが軽いです。

作り方色々、良く使うのでメモ。

ボタン1 2箇所だけ枠線を引いたボックスを作り、css rotateで傾ける

まず四角形を作成して上右にborderをつける

サンプル
無色のハコ
html
	<div class="test">無色のハコ</div>

css
	.test{
        width: 60px;
        height: 60px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
    }

上記のハコを傾ける

サンプル
無色のハコ
css
	.test{
        width: 60px;
        height: 60px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
    }

幅高さ調整で矢印のサイズ調整、枠線の幅色調整で矢印の太さ色を調整。
あとは::afterなどで書き込んでしまえば完成
rotateの角度を変えれば上下左右どちらの方向の矢印でも可能。

ボタン2 隣接したborderの境界が斜めに入るのを利用する

サンプル

divのサイズは左から幅高さ60px→40px→0pxでボーダーは10px。
上記でわかるように、上下左右隣り合ったボーダーの境目は、斜めにカットされる。

html
<div class="test02"></div>
<div class="test02" style="width:40px;height:40px;"></div>
<div class="test02" style="width:0px;height:0px;"></div>
css
	.test02{
		width: 60px;
		height: 60px;
		border-top: 10px solid #f00;
		border-right: 10px solid #0f0;
		border-bottom: 10px solid #00f;
		border-left: 10px solid #ff0;
	}

上記右端の状態で3か所のボーダーを無色にする

サンプル
css
	.test02{
		width: 0;
		height: 0;
		border: solid transparent;
		border-left-color: #ff0;
		border-width: 10px;
	}

ボーダーの上下左右の色を付ける位置で、矢印の向きを変えることが可能。

ボタン3 2で作ったものを、サイズ違いで2つ重ねて「く」の字型の矢印を作る

サンプル
html
<div class="test02"></div>
<div class="test03"></div>
css
	.test02{
		width: 0;
		height: 0;
		border: solid transparent;
		border-left-color: #0f0;
		border-width: 6px;
	}
	.test03{
		width: 0;
		height: 0;
		border: solid transparent;
		border-left-color: #00f;
		border-width: 10px;
	}

上記のサイズの小さいほうを重ねる

サンプル

あとは小さいほうを背景と同色にすれば完成。
before/afterで一個ずつ書き込むと使いやすい。

サンプル
css
	.test02{
		width: 0;
		height: 0;
		border: solid transparent;
		border-left-color: #eee;
		border-width: 6px;
		position: absolute;
		top: 24px;
	}

1の作り方だと、css3で傾けているため、旧ブラウザだと傾かない。そんな時は3などで対応。

やってることは同じだけど、トライアングルジェネレーターなんかもありますね。

CSS triangle generator

LIvedoorブログはSPが調整できません。
お手数ですが
こちらよりPCサイトへ移動してください