CodePen Embed - 100% CSS Pumpkin

Live

​x
 
<!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 class="stem"></div>
        <div class="curve"></div>
        <div class="left_eye"></div>
        <div class="right_eye"></div>
        <div class="smile"></div>
​
    </div>
</body>
</html>
​

Live

xxxxxxxxxx
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0e68c;
}
​
.pumpkin {
    position: relative;
    display: flex;
    align-items: center;
​
}
​
.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;
}
​
.center{
    width: 110px;
    height: 160px;
    background: rgb(255, 117, 24);
    border-radius: 50%;
}
​
.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;
}
​
.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;
}
​
.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)
}
​

This Pen is owned by micfun123 on CodePen.

See more by @micfun123 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.