CSS

2017/04/24

CSSのボーダーで三角を作成するのをCSS三角と呼ぶ。いや、正確にはCSS三角と呼ぶことにする。です。CSSのボックスモデルというのがありまして、border（ボーダー）という線を表示することができます。

borderはうえ、右、下、左と4方向ありそれぞれ別の色にすることが可能です。

このボックスの幅と高さを0にするとそれぞれのボーダーが三角で表示されます。

width:0;height:0;に20pxのボーダーを設定すると上のようになります。これの上、右、下、左の表示と表示位置をコントロールします。

CSS三角で作ってみた

番号付きリストでナビゲーションしました。

1. STEP1
2. STEP2
3. STEP3
4. STEP4

HTMLの一部

<ol class="sankaku">
    <li class="first"><a href="#a">STEP1</a></li>
    <li><a href="#b">STEP2</a></li>
    <li><a href="#c">STEP3</a></li>
    <li><a href="#d">STEP4</a></li>
</ol>

CSSの一部

ol li{
	background-color:#33ff66;
	
	/* li要素の横並べ */
	float:left;
	width:100px;
	height:24px;
	
	/* 区切り目の線を見せるためずらす */
	margin-left:1px;
	
	/* 三角の位置調整のため */
	position:relative;
	
	/* 文字の表示位置の調整 */
	padding-left:12px;
	text-align:center;
	line-height:26px;
}
ol li.first:before{
	/* 左端は四角にする */
	border: 12px solid #33ff66;
}
ol li:before,ol li:after{
	content: "";
	display:block;
	width:0;
	height:0;
	border:12px solid #33ff66;
	position:absolute;
	top:0;
}
ol li:before{
	border-left: 12px solid #333;
	
	/* 表示位置の調整 */
	left:0;
	z-index:1;
}
ol li:after{
	border: 12px solid transparent;
	border-left: 12px solid #33ff66;
	/* 表示位置の調整 */
	right:-24px;
	z-index:2;
}
		

ol liの設定
番号付きリストを横並べにします。floatを使用しますので横幅を設定します。書いていませんが、行頭記号を表示しないようにlist-style-type:noneを設定します。CSS三角をli要素の左右にbefore疑似要素とafter疑似要素でつけますがbefore疑似要素とafter疑似要素の位置指定のためにpositionを設定します。before疑似要素とafter疑似要素のposition:absoluteの位置の基準のためにli要素にposition:relativeを設定します。

ol li.first:beforeの設定
一番左に来るli要素の左に来るbefore疑似要素はすべてのボーダーを同じ色にして表示し、四角にします。

ol li:before,ol li:afterの設定
before疑似要素とafter疑似要素に共通のCSSを設定します。

ol li:beforeの設定
li要素の左の設定。before疑似要素とafter疑似要素はposition:absoluteなので左のliに設定したafter疑似要素に右のli要素のbefore疑似要素が重なっています。右のli要素のbefore疑似要素が上になっています。区切り線の色を設定し、z-indes:1で重なり位置を指定します。

ol li:afterの設定
li要素の右の設定。right:-24pxで右にはみ出して表示します。z-index:2で重なり位置を上にします。

これを作って並べているのですがこのままではSTEP2の左のグレー（before）がSTEP1の右の三角（after）より上になって右がグレーになってしまうので、重なり位置を下にしています。さらに真下に来てしまうとグレーが見えないのでli要素自体の左にmarginを1pxとっています。

さらに一番左に来るli要素のbefore疑似要素は左をグレーにせずに同じ色にしています。