How I made a Pure CSS Pumpkin.

Posted on 2024-10-29 18:51:18

Happy Halloween, I made this recently made this 100% CSS Pumpkin to get in to the spooky season spirit and some people would like to know how it was made.

So let me explain how it works. For those of you who just want the code and dont want to see the process, here is the CodePen .

I have never done something like this before so my first goal was the 3 orange ovals.

So I started off with the HTML. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">
</head>
<body>
    <div class="pumpkin">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        </div>
</body>
</html>

The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.

body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

This outputs 3 Perfect orange Ovals side by side. What is going on here? First, we centre the pumpkin div in the centre of the page using the body tag. We doing this with the first 3 lines. Next, we use height: 100vh; To tell the code that the body tag is taking up 100% of the screen. Without this it will the body tag will only be as big as the content, meaning that the Ovals will be centred across the top of the page. So here is what it looks like.

# Orange Ovals
Next, We want the circles to overlap, this can be done fairly easily by giving the left and right Ovals a negative margin. 

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

So here we moving the right Ovel over to the left by 45 pixels and the left Ovel to the right by 45 pixels. (I'm not going to add a photo of this stage as I still have not got a way to deal with storing photos)

Now for the harder part (Some, ok a lot of Google was used) 

.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}

So width , height, border-radius and background-color are pretty self-explanatory. So im going to skip over it. Starting with position: absolute; what this does is remove the div from the flow of the website. Instead, it is based on the nearest anchor point. position: absolute; Can be placed over any element. Next, to centre the Stem horizontally we use left: 50% and transform: translateX(-50%); It makes sense when you think about it but you do have to think about it to start left: 50% Centers the left edge of the stem within the pumpkin div. I want the centre of the stem to be in the centre of the pumpkin. transform: translateX(-50%); moves the stem back over towards the left side by half the stem size. top: -47px; Does pretty much what you expect. It moves the top edge upwards by 47 px. z-index is a thing I have found recently, basically the height of the element. I want the z-index to be behind the pumpkin so I give it a z-index : -1 while the pumpkin has the default index of 0. This is what it looks like.

Pumpkin

Finally the Eyes, mouth and background. Let's start with the eyes, 

.left_eye {
left: 70%;
top: 25px;
transform: translateX(-50%);
position: absolute;
border-style: solid;
border-width: 0  30px  41px  50px;
border-color: transparent  transparent  #000000  transparent;
}
.right_eye {
left: 30%;
top: 25px;
transform: translateX(-50%);
position: absolute;
border-style: solid;
border-width: 0  50px  41px  30px;
border-color: transparent  transparent  #000000  transparent;
}

So this looks scarier than it is border-width: 0 50px 41px 30px; So here we setting the length of each side of the square. It starts from the top and works its way around clockwise. So the top of the square has a length of 0. This is because triangles have 3 sides this trick lets us remove one of the sides making a triangle. Then the right side is 50px long, the bottom is 50px long and the left side is 30px long. For the right Eye we flip the left and right values so it points in the other direction. border-color: transparent transparent #000000 transparent; So you may wonder why are there so many transparents. Well you see there is actually 3 triangles here (one of them doesn't exist because of the 0 widths) We only want to colour the bottom triangle so we set the other 3 to transparent. border-style: solid; We want the triangle to have a solid fill so we have to set the style to Solid. We have not really filled the triangle in instead we have a really big border so it looks like we have. After all of this, we now have the eyes.

EYES

The last step is the smile. 

.smile {
position: absolute;
width: 80px;
height: 25px;
top: 90px;
left: 25%;
background-color: rgb(0, 0, 0);
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 5px  solid  rgb(0, 0, 0);
border-bottom: 0;
transform: rotate(190deg)
}

border-top-left-radius: 110px; and border-top-right-radius: 110px; define how rounded the top corners will be. This is the bit that makes the semi-circle however this will also put the curve at the top. To fix this I added transform: rotate(190deg) To rotate it to be a Smile and used left: 25%; to make it slightly off Center. So here is the final result.

I will admit it's not the prettiest of solutions or the most efficient, however, it was my first time trying to draw something in CSS and I'm rather happy with it. As always feel free to leave me feedback over on Discord or reddit.

Back to Home