なんかできたよー。

Web系Tipsを適当につづるBlog.

CSS3で可変リストの区切り線を作った

 

さいしょに

Dribbble - Free Colorful Icons by Michael Dolejš にある

f:id:tuki0918:20130703133631p:plain

の区切り線をWebで再現したくて作りました。

完成したの

アイコンは切り抜くの面倒だったので、商用利用可能なアイコン・イラスト素材なら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;」で
一番上の線と一番右の線を隠しています。

カスタム

  • li要素を増減するだけで、ちょっとオシャレなレイアウトになります。

ソースコード

ソースコード