このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成しています。 <ul> <li><a href="">TOP</a></li> <li><a href="">MENU1</a></li> <li><a href="">MENU2</a></li> <li><a href="">MENU3</a></li> </ul> 何もスタイルを指定しない場合はこんな感じですね。 分かりやすいよう背景色のみ指定しています。 TOP MENU1 MENU2 MENU3 スタイルを指定していきます。 まずはメニューを横並び。 これはdisplay:flex;で指定します。 次にliに対してborderを指定します。 右側だけラインが欲しいのでborder-r