CSSだけでボーターを重ねる

しばらく書くのをサボってしまいました–;

また今日から頑張ります。

やりたかったのはこんな感じのやつです。

demo

一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。

:after擬似クラスを使ってみました。

HTML

wrapper 要らないですね・・・

CSS

デベロッパーツールでの確認ですが、IE8でもちゃんと表示、IE7は擬似クラス非対応なので、黒いボーダーのみ表示されていました。

まあこれはこれでいいですね

DEMO

 

SNSでもご購読できます。