この度、divタグ一個でJAYPEGというサービスのロゴを再現するという変態向けの遊びに挑戦したのでその記録を記事にします。
デモはここにあげてます。（MacのChromeでしか動作しないと思うから注意ね。）

DIV一個という制約

div作り放題だったらわりと簡単にできそうで面白くなかったのであえてdiv一個でやることにした。
しかし、div一個ということはそれに:beforeと:after合わせても3つしか要素を作れないわけでこれが中々辛い。

コツてきな何か

1.beforeとafterの特性を知る。

div一個で作るとなった時に主力となるのがbeforeとafterなのだが、こいつらがどのような挙動をするのかしっかり理解している必要がある。

結論から言うと以下の様な結果になる。

<div>  
    :before
    :after
</div>

つまり、（上）after >> before >> div（下）という重なり具合になる。

これを理解してなくて第一案ボツった。合掌。

2.限られた3つの要素に役割を振る。

先ほども書いたようにdiv一個でデザインとなるとbeforeとafterを足しても3つしか要素が作れないわけで、それぞれに役割を振ることによって考えが整理されてうまくいった気がする。

:before

奥行きを考えた時に真ん中に位置する:beforeには全体的なデザインの構築をしてもらう。今回の場合は以下の様な感じ。

div

奥行きを考えた時に一番下に位置することになる。:beforeで再現できなかった隙間を埋めるために使った。今回の場合は以下の様な感じ。

:after

奥行きを考えた時に一番上に位置することになる。:beforeで再現できなかった箇所を強引に上から塗りつぶす用途で使った。一番上に重なる要素だからこそできる技。
今回の場合は以下の様な感じ。

できあがり図

やあ、改めてJEYPEGのロゴかっこいいです。

さて、そんなわけでdivタグ一個でそこそこ遊べますね。
個人的にはパズル的な感じで楽し（苦し）かったです。

それと、JAYPEGのロゴ載せるのまずそうだったら@p1ch_jpまでリプ下さい。取り下げます。