Posted on Oct 21, 2020 • Edited on Nov 14, 2020

CSS Halloween Faces: Ghoul

Here is a Ghoul I made while I was trying to build a skull.

The eyes are similar to the ones from my earlier alien post. I just made the pupils and catchlights circular. By making height and width equal creating a square then adding a border-radius: 100%.

HTML

 <div class="minifig_face"> <div class="eyes_pair"> <div class="eye_socket"> <div class="eyes"> <div class="pupil"> <div class="catchlight"></div> </div> </div> <div class="eyes"> <div class="pupil"> <div class="catchlight"> </div> </div> </div> </div> </div>

CSS

.pupil { width: 50px; height: 50px; margin-top: 50px; background: red; border-radius: 100%; display: flex; justify-content: center; position: relative; } .catchlight { width: 4px; height: 4px; margin-top: 25px; background: rgb(26 23 23); border-radius: 100%; display: flex; justify-content: center; }

The mouth is the same oval shape as the alien. I made the fangs long but used overflow: hidden to hide the roots of the teeth.

.mouth { width: 200px; height: 80px; background: rgb(51 51 51); margin-top: 90px; border-radius: 100px; border: 4px solid black; display: flex; justify-content: space-around; align-items: center; position: relative; overflow: hidden; } .fangs { width: 5px; height: 65px; margin-top: -50px; background: #fff; border-radius: 100%; display: flex; justify-content: center; position: relative; border: solid 1px black; } .fangs_bottom { width: 7px; height: 100px; margin-bottom: -50px; background: #fff; border-radius: 100%; display: flex; justify-content: center; position: relative; border: solid 1px black; }

I added a nose by making a rectangle out of borders and making the color of the sides transparent but the bottom a solid color.

.nose_pair { position: relative; display: flex; justify-content: center; align-items: center; } .leftNostril { border-left: 30px solid transparent; border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23); display: inline-block; margin-bottom: -70px; } .bridge { width: 2px; height: 22px; } .rightNostril { border-right: 30px solid transparent; border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23); display: inline-block; margin-bottom: -70px; }