In this blog post, I will walk you through how I created a 2D Pokéball using a single div and a little bit of CSS. Like my previous single div drawing tutorial, I will be picking up right where I left off in my CSS Magic with a Single DIV tutorial.
In that tutorial, I covered the basic building blocks of single div drawings:
- pseudo-elements
- box-shadows
- background and gradients
- …and more
Now, let’s get started!
Drawing a Pokéball with CSS
When tackling a single div drawing, it is helpful to break down the object your intend to draw into basic shapes. In the case of the Pokéball, most of our work it cut out for us because the primary shape is a circle. There is:
- a circle for the main shape of the Pokéball
- a circle for the Pokéball button
- semi-circles for the top and bottom portion of the Pokéball
- a rectangle band around the center of the Pokéball
Step 1: Create the basic shape of the Pokéball
With our basic shapes in mind, it’s time to draw them. Let’s start off with some CSS basic boilerplate and a div for our drawing.
<div></div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: white;
}
div {
height: 50vmin;
width: 50vmin;
}
Now, let’s update the div style so it takes the shape of a circle. We can do this by updating the border-radius property to 50%. Set the background-color of the div to red to represent part of the Pokéball.
div {
height: 50vmin;
width: 50vmin;
border-radius: 50%;
background-color: red;
}
border-radius propertyStep 2: Add a border around the circle
Add a solid black border around the circle to help it stand out more.
div {
height: 50vmin;
width: 50vmin;
border-radius: 50%;
background-color: red;
border: 3.75vmin solid black;
}
Step 3: Draw the semi-circles and middle band of the Pokéball
Next up, let’s tackle the red and white semi-circles for the top and bottom portions, well as the black mid-section of the Pokéball. To do this, let’s use a linear gradient.
div {
height: 50vmin;
width: 50vmin;
border-radius: 50%;
border: 3.75vmin solid black;
background-image: linear-gradient(red 46%, black 46%, black 54%, white 54%);
}
The addition of the linear gradient removes the need for background-color property setting, so let’s remove that line.
Step 4: Draw a circle for the Pokéball button
Finally, we need to draw the button. To do this, let’s use another gradient: the radial-gradient.
div {
height: 50vmin;
width: 50vmin;
border-radius: 50%;
border: 3.75vmin solid black;
background-image:
radial-gradient(white 20%, white 20%, black 20%, black 30%, transparent 30%, transparent),
linear-gradient(red 46%, black 46%, black 54%, white 54%);
}
A couple things worth mentioning:
- You can add multiple gradients to the background image property. The first item it the list is the top most item.
- Use commas to separate the different gradients. I made the mistake of adding a semicolon and was stumped on why things weren’t drawing like I expected. Don’t make my blunder!
Codepen Example
Play around with the Pokéball in Codepen!
See the Pen Single Div Pokéball Drawing by Ashley Grenon (@townsean) on CodePen.
