DEV Community

Michael Parker
Michael Parker

Posted on

How I made a Pure CSS Pumpkin.

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.

See the Pen
100% CSS Pumpkin
by micfun123 (@micfun123)
on CodePen.

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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.

See the Pen
100% CSS Pumpkin
by micfun123 (@micfun123)
on CodePen.

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more