In this tutorial we will create beloved animate character Doraemon.
HTML
<div class="container"> <div class="figure"> <div class="head"> <div class="eye_1"></div> <div class="eye_2"></div> <div class="eyeball"></div> <div class="nose"></div> <div class="mouth_1"></div> <div class="mouth_2"></div> <div class="whisker_1"></div> <div class="whisker_2"></div> </div> <div class="hand_1"></div> <div class="hand_2"></div> <div class="hand_3"></div> <div class="hand_4"></div> <div class="foot_1"></div> <div class="foot_2"></div> <div class="body"> <div class="chest"></div> <div class="leg"></div> </div> <div class="neck"></div> <div class="bell_1"></div> <div class="bell_2"></div> </div> </div>
CSS
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { padding: 0; margin: 0; } .container { width: 500px; margin: 50px auto; } .figure { position: relative; width: 55%; margin: 0 auto; } .head { width: 270px; height: 250px; background-color: #0090d5; border-radius: 51% 49% 44% 56% / 42% 44% 56% 58%; border: 2px solid #606060; } .head::before { content: ''; width: 230px; height: 210px; background-color: #fff; border-radius: 48% 52% 46% 54% / 38% 38% 62% 62%; border: 2px solid #606060; position: absolute; top: 43px; left: 22px; } .eye_1 { width: 56px; height: 68px; background-color: #fff; position: absolute; border-radius: 46% 54% 46% 54% / 62% 62% 38% 38%; border: 2px solid #000; top: 15px; left: 80px; } .eye_2 { width: 56px; height: 68px; background-color: #fff; position: absolute; border-radius: 46% 54% 46% 54% / 62% 62% 38% 38%; border: 2px solid #000; top: 15px; left: 134px; } .eyeball { width: 7px; height: 7px; background-color: #000; border-radius: 50%; position: absolute; top: 60px; left: 119px; } .eyeball::before { content: ""; width: 7px; height: 7px; background-color: #000; border-radius: 50%; position: absolute; top: 1px; left: 24px; } .nose { width: 22px; height: 22px; background: radial-gradient(circle, rgba(234, 46, 38, 1) 0%, rgba(234, 46, 38, 1) 50%, rgba(157, 16, 11, 1) 100%); border-radius: 50%; border: 1px dotted #000; position: absolute; top: 70px; left: 126px; } .nose::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; position: absolute; top: 2px; left: 3px; } .mouth_1 { width: 3px; height: 75px; background-color: #606060; position: absolute; top: 92px; left: 134px; } .mouth_2 { width: 180px; height: 70px; border: solid 5px #000; border-color: #606060 transparent transparent transparent; border-radius: 50%/70px 70px 0 0; position: absolute; top: 100px; left: 45px; transform: rotate(-180deg); } .whisker_1 { width: 60px; height: 3px; background-color: #606060; position: absolute; top: 110px; left: 40px; } .whisker_1::before { content: ""; width: 60px; height: 3px; background-color: #606060; position: absolute; top: -19px; transform: rotate(12deg); } .whisker_1::after { content: ""; width: 60px; height: 3px; background-color: #606060; position: absolute; top: 19px; transform: rotate(-12deg); } .whisker_2 { width: 60px; height: 3px; background-color: #606060; position: absolute; top: 110px; left: 172px; } .whisker_2::before { content: ""; width: 60px; height: 3px; background-color: #606060; position: absolute; top: -19px; transform: rotate(-12deg); } .whisker_2::after { content: ""; width: 60px; height: 3px; background-color: #606060; position: absolute; top: 19px; transform: rotate(12deg); } .neck { width: 200px; height: 10px; background-color: red; border: 2px solid #000; position: absolute; top: 220px; left: 39px; border-top-right-radius: 15px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .body { width: 195px; height: 180px; background-color: #0090d5; border: 2px solid #606060; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; position: absolute; top: 225px; left: 40px; } .body::before { content: ""; width: 10px; height: 50px; background-color: #0090d5; position: absolute; left: -2px; } .body::after { content: ""; width: 10px; height: 47px; background-color: #0090d5; position: absolute; right: -3px; } .chest { width: 160px; height: 140px; background-color: #fff; border: 2px solid #000; border-radius: 50%; position: absolute; top: -7px; left: 18px; } .chest::before { content: ""; width: 125px; height: 65px; position: absolute; border: 2px solid #606060; top: 55px; left: 16px; border-radius: 51% 49% 48% 52% / 1% 0% 100% 99%; } .bell_1 { width: 30px; height: 30px; background-color: #fed830; border: 2px solid #000; border-radius: 53% 47% 48% 52% / 62% 67% 33% 38%; position: absolute; top: 220px; left: 122px; } .bell_1::before { content: ""; width: 30px; height: 6px; background-color: #eabe5c; border: 2px solid #000; position: absolute; top: 7px; left: -2px; border-top-right-radius: 15px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .bell_2 { width: 6px; height: 6px; background-color: #606060; border-radius: 50%; position: absolute; top: 238px; left: 135px; } .bell_2::before { content: ""; width: 3px; height: 11px; background-color: #606060; position: absolute; left: 1.3px; } .leg { width: 3px; height: 25px; background-color: #606060; position: absolute; top: 152px; left: 97px; } .leg::before { content: ""; width: 12px; height: 3px; background-color: #606060; position: absolute; left: -4.5px; } .hand_1 { width: 70px; height: 45px; background-color: #0090d5; border-top-left-radius: 40%; border-bottom-left-radius: 40%; border: 2px solid #606060; transform: rotate(-49deg); position: absolute; left: -1px; top: 247px; } .hand_2 { width: 70px; height: 45px; background-color: #0090d5; border-top-left-radius: 40%; border-bottom-left-radius: 40%; border: 2px solid #606060; transform: rotate(220deg); position: absolute; left: 212px; top: 247px; } .hand_3 { width: 45px; height: 45px; background-color: #fff; border: 2px solid #606060; border-radius: 50%; position: absolute; top: 277px; left: -10px; } .hand_4 { width: 45px; height: 45px; background-color: #fff; border: 2px solid #606060; border-radius: 50%; position: absolute; top: 270px; left: 250px; } .foot_2 { width: 115px; height: 40px; background-color: #fff; border: 2px solid #606060; border-radius: 1% 99% 15% 85% / 94% 68% 32% 6%; position: absolute; top: 392px; left: 140px; } .foot_1 { width: 130px; height: 40px; background-color: #fff; border: 2px solid #606060; border-radius: 1% 99% 15% 85% / 94% 68% 32% 6%; transform: rotateY(180deg); position: absolute; top: 395px; left: 9px; } .foot_2 { width: 130px; height: 40px; background-color: #fff; border: 2px solid #606060; border-radius: 1% 99% 15% 85% / 94% 68% 32% 6%; position: absolute; top: 395px; left: 143px; }