before,after擬似要素で３Dっぽい効果をつける

before,after擬似要素を使ってボックスに３Dっぽい効果を付けられるんじゃないかと考えてみた．
任意の要素にはその前後に仮想的な要素が設定されていて，これを上手く使うと単一の要素に吹き出しっぽい効果を付けられたり，凝った影の効果を付けられたりと夢が広がるんだけれど，上手く使えば3Dっぽくもできそうだなぁと．

早速試してみる．手順としてはこんな感じ．

• before擬似要素を対象となる要素の上に配置する．
• after擬似要素を対象となる要素の右に配置する．
  もちろんこの操作を行うために元となる要素にはposition:relativeを設定しておく．
• transformスタイルでそれぞれ４５度傾けて右上を密着させる．
• より立体感を出すためにborder-styleを使って明部・暗部の色を変えてみる．

そして完成したものが下．サイズが固定だといまいち面白くないのでhover時にサイズが代わるようにしてみた．
borderに見えるのはbox-shadowにinsetを指定して影をつけたもので代用している．また，boxのz-indexは上のものほど大きい値にしないと立体部の重なりが壊れる．その他paddingとかborderとかtext-indent等のスタイルを指定すると変形部がずれてしまう点に注意．