CSS だけで枠線付きステップバーを作る

お問い合わせフォームなどで進行状況を伝えるためにはステップバーが便利です。

ステップバーを作るには画像で作る方法と CSS で作る方法の二通りあり、画像で作るのは比較的簡単ですが、ON/OFF など切り替える表示それぞれについて画像を用意しなければいけません。

それに対して CSS は画像ファイルを用意する必要がないメリットがあります。

しかし、CSS で作るステップバーの作り方を Web で調べてみると、ほぼ全てが枠線の無い、塗りだけで作られているものです。

考え方としては、ステップバー右の凸側の三角形は ::after 疑似要素にステップバーと同色の塗りの三角形を配置して、ステップバー左の凹側の三角形は ::before 疑似要素に白などのステップバーが配置されている要素の背景色の三角形を配置して切り抜くようにして作っています。

この三角形は border を使っているので三角形の角度を細かく設定できるメリットがありますが、塗りでしか作ることができず、これだけでは枠線を表現することができません。

従って、塗りだけで擬似的に枠線を作るために

要素を一つ増やし、外側の要素には枠線の太さ分の padding を設定して、内側の

には背景色を設定します。こちらにも ::before、::after 疑似要素で左右に三角形を作りますが、こちらも枠線の太さ分小さく作ります。

具体的な HTML、CSS は次のような感じになります。

<ul class="stepbar">
	<li class="stepbar__item"><div class="stepbar__item-inner">STEP1</div></li>
	<li class="stepbar__item"><div class="stepbar__item-inner stepbar__item-inner--current">STEP2</div></li>
	<li class="stepbar__item"><div class="stepbar__item-inner">STEP3</div></li>
	<li class="stepbar__item"><div class="stepbar__item-inner">STEP4</div></li>
</ul>

.stepbar {
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.stepbar__item {
	box-sizing: border-box;
	position: relative;
	width: calc((100% - 30px) / 4);
	height: 80px;
	margin: 0 5px;
	padding: 1px;
	background: #299100;
}

/* 重なり順を設定 */
.stepbar__item:nth-child(1) {
	z-index: 4
}

.stepbar__item:nth-child(2) {
	z-index: 3
}

.stepbar__item:nth-child(3) {
	z-index: 2
}

.stepbar__item:nth-child(4) {
	z-index: 1
}

.stepbar__item:first-child {
	margin-left: 0;
}

.stepbar__item:last-child {
	margin-right: 0;
}

.stepbar__item:not(:first-child)::before {
	position: absolute;
	content: "";
	top: 0;
	left: 1px;
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-right: 0;
	border-bottom: 40px solid transparent;
	border-left: 20px solid #299100;
}

.stepbar__item:not(:first-child)::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-right: 0;
	border-bottom: 40px solid transparent;
	border-left: 20px solid #ffffff;
}

.stepbar__item-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #ffffff;
	font-size: 1rem;
	font-weight: bold;
}

.stepbar__item-inner--current {
	background: transparent;
	color: #ffffff;
}

.stepbar__item:not(:last-child) .stepbar__item-inner::before {
	position: absolute;
	content: "";
	top: 0;
	left: 100%;
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-right: 0;
	border-bottom: 40px solid transparent;
	border-left: 20px solid #299100;
}

.stepbar__item:not(:last-child) .stepbar__item-inner::after {
	position: absolute;
	content: "";
	top: 0;
	left: calc(100% - 1px);
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-right: 0;
	border-bottom: 40px solid transparent;
	border-left: 20px solid #ffffff;
}

.stepbar__item:not(:last-child) .stepbar__item-inner--current::after {
	display: none;
}

Github にもこちらのサンプルを公開しています。https://github.com/gakuya/stepbar_with_border

HTML、CSS 共にあまりスマートな感じではないのが残念です。

あと塗りでも枠線でも、三角形の角が鋭角でなければいけませんので、丸みのあるデザインの場合は画像を使うことになります。最近では SVG もごく普通に使われるようになってきているので、SVG を背景画像に設定するのも一つの方法だと思います。

画像を使う場合は管理すべきファイルの数が増えますがデザインの自由度は高くなりますし、CSS の場合はデザインの自由度は高くありませんが管理すべきファイルは減らすことができる、というそれぞれのメリット、デメリットをきちんと理解した上でどちらを利用するかを決めましょう。