ステップナビゲーションにclip-pathを使いたい。

おはようございます。株式会社るーぷのコーダー、三木と申します。

最近、子供を寝かせる時ですね、1時間近くベッドの上でドッタンバッタンお・お・さ・わ・ぎ！！でして…
めっちゃ揺れるから調子悪いときは乗り物酔いみたいになっちゃうのが悩みです。タスケテ…

さぁ！今日も元気に参りましょうね！！！

ステップナビゲーションとは

フォームなどでよく見かける、今どの段階にいるのかを大まかに示してくれるナビです。

呼び名が分からないので「フォーム　ナビ　html」って調べたら出てきました。

step.1
step.2
step.3

こういうやつです。

このステップナビゲーション、尖ってる部分がありますよね。

作り方を調べるとよく見かけるのは、::beforeなど擬似要素で三角形を作って端に付ける方法でした。

参考その1：フォームにある現在地を示すステップナビゲーション

参考その2：CSS フォームのステップバーデザインテンプレート 3選の矢印タイプの項

しかし私はWeb業界歴が短く、borderで三角形をつくる手法に馴染みがないので、clip-pathでなんとかしようと思いました。

手順

まずclip-pathする手前まで…

step.1
step.2
step.3

HTML

CSS

ol li{
font-weight: 700;
text-align: center;
width: 32%;
margin-right: .5%;
background-color: #43c0ff;
position: relative;
}
ol li.current{
color: #fff;
}

ol li::after{
content: “”;
display: block;
width: calc(100% – 4px);
height: calc(100% – 4px);
background-color: #fff;
position: absolute;
top: 2px;
left: 2px;
}
ol li.current::after{
background-color: #43c0ff;
}

ol li:nth-last-of-type(1){
margin-right: 0;
}
ol li span{
display: inline-block;
padding: 0 1em;
position: relative;
z-index: 1;
}

clip-pathします。

step.1
step.2
step.3

CSS

ol li:nth-of-type(1), ol li:nth-of-type(1)::after{
clip-path: polygon(0 0, calc(100% – 1em) 0, 100% 50%, calc(100% – 1em) 100%, 0 100%);
}
ol li:nth-of-type(2), ol li:nth-of-type(2)::after{
clip-path: polygon(0 0, calc(100% – 1em) 0, 100% 50%, calc(100% – 1em) 100%, 0 100%, 1em 50%);
}
ol li:nth-of-type(3), ol li:nth-of-type(3)::after{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1em 50%);
}

線の太さがまばらになってしまったので整えます。
あと間を詰めたり、文字の位置調整したり。

step.1
step.2
step.3

（線の太さ見たいのでcurrent外しました）

CSS

ol li{
width: 34%;
margin-right: -2%;
}
ol li:nth-of-type(1)::after{
clip-path: polygon(0 0, calc(100% – 1em) 0, calc(100% – 2px) 50%, calc(100% – 1em) 100%, 0 100%);
}
ol li:nth-of-type(2)::after{
clip-path: polygon(4px 0, calc(100% – 1em) 0, calc(100% – 2px) 50%, calc(100% – 1em) 100%, 4px 100%, calc(1em + 2px) 50%);
}
ol li:nth-of-type(3)::after{
clip-path: polygon(4px 0, 100% 0, 100% 100%, 4px 100%, calc(1em + 2px) 50%);
}

ol li:nth-of-type(1) span{
padding: 0 1.25em 0 .75em;
}
ol li:nth-of-type(3) span{
padding: 0 .75em 0 1.25em;
}

大まかには以上です。結構手間かもしれませんが一案ということで…！失礼いたします！

ステップナビゲーションにclip-pathを使いたい。

ステップナビゲーションとは