CSSでアンパンマンを描く

CSSのみで描かれたアンパンマンです。

DEMO

HTML

<div class="face"> <div class="eyebrows"> <span class="eyebrow_left"></span> <span class="eyebrow_right"></span> </div> <div class="eyes"> <span class="eye_left"></span> <span class="eye_right"></span> </div> <div class="noses"> <span class="nose_left"><span class="ray"></span></span> <span class="nose_center"><span class="ray"></span></span> <span class="nose_right"><span class="ray"></span></span> </div> <div class="mouths"> <span class="mouth_bottom"></span> <span class="mouth_top"></span> <span class="tongue"></span> </div> </div>

親要素である顔の<div class="face"></div>が囲っている子要素には、眉の<div class="eyebrows"></div>を始め、目の<div class="eyes"></div>や鼻の<div class="noses"></div>、口の<div class="mouths"></div>が存在しています。

CSS

body { background:#44DEDE; } .face { position: relative; width: 500px; height: 450px; margin: 50px auto; border-radius: 47%; background-color: #F09567; } .eyebrows { position: absolute; top: 0; left: 145px; width: 210px; height: 75px; } .eyebrow_left, .eyebrow_right { position: absolute; top: 20px; width: 90px; height: 110px; border-top: 2px solid #333; border-radius: 50%; } .eyebrow_left { left: 0; } .eyebrow_right { right: 0; } .eyes { position: absolute; top: 75px; left: 150px; width: 200px; height: 75px; } .eye_left, .eye_right { position: absolute; top: 0; width: 45px; height: 75px; border-radius: 50%; background-color: #333; } .eye_left { left: 17.5px; } .eye_right { right: 17.5px; } .noses { position: absolute; z-index: 3; top: 150px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 420px; height: 150px; background-color: #F09567; } .nose_left, .nose_right { z-index: 1; position: absolute; top: 0; width: 135px; height: 100%; border-radius: 50%; background-color: #F7771B; } .nose_left { left: 50%; transform: translateX(-210px); } .nose_right { right: 50%; transform: translateX(210px); } .nose_left .ray, .nose_right .ray { position: absolute; top: 60px; width: 30px; height: 30px; background-color: #FFF; } .nose_left .ray { left: 42.5px; } .nose_right .ray { right: 42.5px; } .nose_center { z-index: 2; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 150px; height: 130px; border-radius: 50%; background-color: #DA3C0C; } .nose_center .ray { position: absolute; top: 50px; left: 60px; width: 30px; height: 30px; background-color: #FFF; } .mouths { position: absolute; z-index: 0; top: 300px; left: 120px; width: 260px; height: 150px; } .mouth_bottom { position: absolute; z-index: 1; top: -100px; left: 0; width: 100%; height: 200px; background-color: #AF5C5D; border-radius: 50%; } .mouth_top { position: absolute; z-index: 2; top: 0; left: 0; width: 260px; height: 150px; }

各パーツを均等に配置するために眉+目(.eyebrows,.eyes)、鼻(.noses)、口(.mouths)の各高さが150pxとなるようにしています。

post_07_image

.faceには各パーツを絶対配置するためにposition:relative;を指定しています。
眉は.eyebrowsを基準に左眉、右眉.eyebrow_left, .eyebrow_rightをそれぞれ絶対配置しています。右目、左目も同様に.eyesを基準に絶対配置しています。
鼻(.nose)と頬(.cheek_left,.cheek_right)は、.nosesを基準に絶対配置しています。
口は.mouthsを基準に、輪郭の上部分(.mouth_top)と下部分(.mouth_bottom)を分けて配置しています。

舌出しver

また、前述のコードの一部を変更すると、舌出しver.にすることも可能です。 See the Pen <a href='http://codepen.io/tsukulognet/pen/mJrmJQ/'>mJrmJQ</a> by tsukulognet (<a href='http://codepen.io/tsukulognet'>@tsukulognet</a>) on <a href='http://codepen.io'>CodePen</a>.

HTML

<span class="mouth_top"></span>の下に下記を追加します。

<span class="tongue"></span>

CSS

.mouths {}に下記を追加します。
```
border-top:50px solid #000;
```
.mouths {}から下記を削除します。
```
border-top: 2px solid #000;
```

下記を新たに追加します。

.tongue { position: absolute; z-index: 9; top: -50px; left: 130px; width: 130px; height: 100%; border-left: 2px solid #000; }

以上で、CSSのみで描くアンパンマンの作り方を終わります。