CSS3で可変リストの区切り線を作った
完成したの
アイコンは切り抜くの面倒だったので、商用利用可能なアイコン・イラスト素材ならICON HOIHOI さんの所のを使いました。
※ 画像の高さが行毎に等しい場合用です。(CSSだけだと内側の白線が上手くいかない)
※ 地味にレスポンシブに対応してる。
- 「display:table」を使ってるのでli要素を増やしても上手く収まってくれます。
線について
- 準備として
● .menu li
● .menu li .icon
にそれぞれ「border-top」と「border-right」を設定しています。
- 例外として
● .menu:first-child li, .menu:first-child .icon
● .menu li:last-child, .menu li:last-child .icon
にそれぞれ「border-top-color: transparent;」と「border-right-color: transparent;」で
一番上の線と一番右の線を隠しています。