In this post, we will create Mickey Mouse Face with CSS.
HTML
<div class="container"> <div class="circle"></div> <div class="head"> <div class="left_ear"></div> <div class="right_ear"></div> <div class="lower_face"></div> <div class="left_face"></div> <div class="right_face"></div> <div class="lower_left_face"></div> <div class="right_left_face"></div> <div class="mouth_1"></div> <div class="mouth_2"></div> <div class="mouth_3"></div> <div class="mouth_4"></div> <div class="tongue_1"></div> <div class="left_eye"></div> <div class="left_eyeball"></div> <div class="right_eye"></div> <div class="right_eyeball"></div> <div class="nose_1"></div> <div class="nose_2"></div> <div class="clearup_1"></div> <div class="clearup_2"></div> <div class="clearup_3"></div> <div class="clearup_4"></div> <div class="clearup_5"></div> <div class="clearup_6"></div> </div> </div>
CSS
html{ box-sizing: border-box; } *, *::before, *::after{ box-sizing: inherit; } body{ padding: 0; margin: 0; height: 100vh; background-color: #a7cef3; display: flex; justify-content: center; align-items: center; } .circle{ width:370px; height: 370px; background: radial-gradient(circle, rgba(246,93,59,1) 0%, rgba(250,155,133,1) 100%); border: 10px solid #fff; border-radius: 50%; position:absolute; top: 125px; left: 453px; } .head{ width: 285px; height: 300px; background-color: #000; border-radius: 50%; position: relative; transform: rotate(-9deg); } .left_ear{ width: 170px; height: 180px; background-color: #000; border-radius: 50%; position: absolute; top: -80px; left: -70px; transform: rotate(25deg); } .right_ear{ width: 170px; height: 180px; background-color: #000; border-radius: 50%; position: absolute; top: -80px; right: -70px; transform: rotate(-25deg); } .left_face{ width: 150px; height: 200px; background-color: #fbd9c2; border-radius: 50%; position: absolute; top: 25px; left: 40px; transform: rotate(-9deg); } .right_face{ width: 150px; height: 200px; background-color: #fbd9c2; position: absolute; border-radius: 50%; top: 25px; right: 40px; transform: rotate(9deg); } .lower_left_face{ width: 100px; height: 200px; background-color: #fbd9c2; position: absolute; border-radius: 50%; top: 125px; left: 25px; transform: rotate(-53deg); } .right_left_face{ width: 100px; height: 200px; background-color: #fbd9c2; position: absolute; border-radius: 50%; top: 125px; right: 25px; transform: rotate(53deg); } .lower_face{ width: 160px; height: 250px; background-color: #fbd9c2; position: absolute; border-radius: 50%;; top: 63px; left: 63px; border: 2px solid #000; } .left_eye{ width: 40px; height: 85px; background-color: #fff; border:3px solid #000; border-radius: 50%; position: absolute; top: 85px; left: 98px; transform: rotate(-4deg); } .left_eyeball{ width: 20px; height: 30px; background-color: #000; border-radius: 50%; position: absolute; top: 137px; left: 115px; } .left_eyeball::before{ content: ''; width: 6px; height: 10px; background-color: #fff; border-radius: 50%; position: absolute; left: 4px; } .right_eye{ width: 40px; height: 85px; background-color: #fff; border:3px solid #000; border-radius: 50%; position: absolute; top: 85px; right: 98px; transform: rotate(4deg); } .right_eyeball{ width: 20px; height: 30px; background-color: #000; border-radius: 50%; position: absolute; top: 137px; right: 115px; } .right_eyeball::before{ content: ''; width: 6px; height: 10px; background-color: #fff; border-radius: 50%; position: absolute; right: 4px; } .nose_1{ width: 100px; height: 50px; background-color: #fff; position: absolute; top: 165px; left: 90px; border-radius: 50%; border-top: 3px solid #000; background-color: #fbd9c2; } .nose_2{ width: 85px; height: 60px; position: absolute; top: 175px; left: 97px; border-radius: 50%; background-color: #000; } .nose_2::before{ content: ''; width: 45px; height: 20px; position: absolute; top: 5px; left: 22px; border-radius: 50%; background-color: #fff; } .mouth_1{ width: 180px; height: 130px; background-color: #000; border-radius: 50%; position: absolute; top: 150px; left: 53px; transform: rotate(90deg); } .mouth_2{ width: 230px; height: 150px; background-color: #fbd9c2; border-radius: 50%; position: absolute; top: 110px; left: 25px; border-bottom: 5px solid #000; } .mouth_3{ width: 15px; height: 25px; background-color: transparent; border-left: 4px solid #000; border-radius: 45%; position: absolute; top: 196px; left: 25px; transform: rotate(55deg); } .mouth_4{ width: 15px; height: 25px; background-color: transparent; border-right: 4px solid #000; border-radius: 45%; position: absolute; top: 192px; right: 25px; transform: rotate(-55deg); } .tongue_1{ width: 60px; height: 30px; background-color: #ed8779; border-radius: 50%; border-top-right-radius: 25px; border-top-left-radius: 15px; position: absolute; top: 270px; left: 113px; } .tongue_1::before{ content: ''; width: 25px; height: 25px; background-color: transparent; border-right: 5px solid #000; border-radius: 50%; position: absolute; top: -2px; left: 17px; transform:rotate(-45deg); } .clearup_1{ width: 20px; height: 20px; background-color: #fbd9c2; border-radius: 50%; position: absolute; top: 175px; right: 85px; } .clearup_2{ width: 20px; height: 20px; background-color: #fbd9c2; border-radius: 50%; position: absolute; top: 175px; left: 85px; } .clearup_3{ width: 19px; height: 19px; background-color: #fbd9c2; border-radius: 50%; position: absolute; top: 183px; left: 15px; } .clearup_4{ width: 19px; height: 19px; background-color: #fbd9c2; border-radius: 50%; position: absolute; top: 177px; right: 19px; } .clearup_5{ width: 2px; height: 30px; background: #000; position: absolute; top: 200px; left: 35px; transform: rotate(-39deg); } .clearup_6{ width: 2px; height: 28px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: #000; position: absolute; top: 196px; right: 36px; transform: rotate(35deg); }