2018お問い合わせフォームなどで進行状況を伝えるためにはステップバーが便利です。切り替える表示それぞれについて画像を用意しなければいけません。画像ファイルを用意する必要がないメリットがあります。調べてみると、ほぼ全てが枠線の無い、塗りだけで作られているものです。疑似要素に白などのステップバーが配置されている要素の背景色の三角形を配置して切り抜くようにして作っています。使っているので三角形の角度を細かく設定できるメリットがありますが、塗りでしか作ることができず、これだけでは枠線を表現することができません。設定して、内側のには背景色を設定します。疑似要素で左右に三角形を作りますが、こちらも枠線の太さ分小さく作ります。次のような感じになります。こちらのサンプルを公開しています。共にあまりスマートな感じではないのが残念です。あと塗りでも枠線でも、三角形の角が鋭角でなければいけませんので、丸みのあるデザインの場合は画像を使うことになります。背景画像に設定するのも一つの方法だと思います。場合はデザインの自由度は高くありませんが管理すべきファイルは減らすことができる、というそれぞれのメリット、デメリットをきちんと理解した上でどちらを利用するかを決めましょう。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイトご意見、ご感想をお願いします。コメントデータの処理方法の詳細はこちらをご覧ください。