CSS Art

CSS Art – shape() Function & Gradients: Build an Isometric Snare Drum - Part 1

CSS isn't just for styling! Discover how the shape() function and gradients turn plain HTML into a 3D isometric snare drum

Pyxofy

13 Sep 2026 • 12 min read

Photo by Pearl Drums / Unsplash

Introduction

With modern CSS, you can create much more than simple rectangles. In this article series, you'll discover how a collection of basic HTML elements and CSS properties can be transformed into a detailed isometric snare drum. Along the way, you'll learn how to combine simple shapes, precise positioning, and creative styling techniques to turn pure CSS into a powerful design tool.

In this three-part series, you'll build a CSS isometric snare drum from the ground up. By the end of the series, you'll have created a detailed drum illustration using nothing but HTML and CSS.

In Part 1, this article, you'll focus on constructing the drum's foundation by creating the tripod stand, including the tripod base center column, support braces (connectors), and three legs that hold the drum in place.
In Part 2, you'll build the remaining drum components, including the bottom rim, top rim, drum body, tension rods, and drum head. These elements will come together to form the complete structure of the snare drum.
In Part 3, you'll bring your illustration to life using CSS Custom Properties (variables) and CSS gradients. These techniques will add realistic metallic finishes, subtle highlights, shadows, and depth, transforming the basic shapes into a polished and visually appealing snare drum.

CSS functions and properties you’ll be exploring in this article:

rotate
border-radius
position
background

Preview

Here's a quick preview of the isometric snare drum you'll create in this three-part article series.

Isometric Snare Drum - Grayscale Preview with Grid

Isometric Snare Drum - Color Preview with Grid

Prerequisites

Essential CSS and HTML knowledge will help you understand the concepts and techniques introduced in this article. Jump over to this article if you require an HTML and CSS primer.

We assume you have configured tools to modify CSS. If not, this article will guide you through the setup process.

HTML Structure

<div class="container">
  <!-- Stand -->
  <div class="first-leg-connector"></div>
  <div class="second-leg-connector"></div>
  <div class="stand-tripod-base"></div>
  <div class="third-leg-connector"></div>
  <div class="stand-first-leg"></div>
  <div class="stand-second-leg"></div>
  <div class="stand-third-leg"></div>

  <!-- Bottom Rim -->
  <div class="bottom-rim"></div>

  <!-- Drum Body -->
  <div class="drum-body"></div>

  <!-- Top Rim -->
  <div class="top-rim"></div>

  <!-- Tension Rods -->
  <div class="rod rod-1"></div>
  <div class="rod rod-2"></div>
  <div class="rod rod-3"></div>
  <div class="rod rod-4"></div>
  <div class="rod rod-5"></div>
  <div class="rod rod-6"></div>

  <!-- Drum Head -->
  <div class="drum-head"></div>
</div>

container is the outermost enclosure. It enables the content to be centered and draws a light gray border. The rest of the <div>s represent each image component.

Keep the HTML structure as is for the image to display correctly.

Body and Container `<div>` CSS

CSS code for the body and container <div>.

/* Body and Container Settings */
/* Center shapes */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Set background and border color */
.container {
  width: 500px;
  height: 500px;
  border: 5px solid lightgray;
  background: transparent;
  position: relative;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Common Properties

This grouped selector defines a shared property for many drum-related elements and pseudo-elements keeping your code clean and easy to maintain.

/* Common Properties */
.stand-tripod-base,
.first-leg-connector,
.second-leg-connector,
.third-leg-connector,
.stand-first-leg,
.stand-second-leg,
.stand-third-leg,
.bottom-rim,
.bottom-rim::after,
.drum-body,
.drum-body::before,
.rod,
.rod-1,
.rod-2,
.rod-3,
.rod-4,
.rod-5,
.rod-6,
.top-rim,
.top-rim::before,
.top-rim::after,
.drum-head {
  position: absolute;
}

By assigning position: absolute to all of them at once, the CSS becomes cleaner and easier to maintain because the same declaration does not need to be repeated for every selector.

Stand Tripod Base

The Stand Tripod Base CSS code creates the central support column of the snare drum's tripod stand. It acts as the main structural element, connecting the drum to the stand and serving as the point where the legs and support connectors meet.

/* Stand Tripod Base */
.stand-tripod-base {
  width: 20px;
  height: 126px;
  left: 234px;
  top: 299px;
  background: gray;
}

With a width of 20px and a height of 126px, the rectangle forms a tall, narrow pillar that extends downward from the drum shell.
The left: 234px and top: 299px properties position the rectangle near the center of the container, helping keep the stand visually balanced beneath the drum.
For development and layout testing, the element uses a simple gray background.

Stand Tripod Base - Rounded Bottom Corners

.stand-tripod-base {
  border-radius: 0 0 5px 5px;
}

The border-radius: 0 0 5px 5px property rounds only the bottom corners, giving the column a smoother and more realistic appearance while keeping the top edge flat where it connects to the drum hardware.

Leg Connectors

In this section, you'll create the three support braces (connectors) that connect the tripod legs to the central stand column. These components, named First Leg Connector, Second Leg Connector, and Third Leg Connector, act as the structural links between the legs and the .stand-tripod-base, helping the stand appear stable and realistic.

Each connector is a small rectangular element that is carefully positioned and rotated to align with its corresponding leg. Together, these connectors reinforce the tripod structure and add an extra level of detail to the drum stand.

Let’s work on the First Leg Connector.

/* First Leg Connector */
.first-leg-connector {
  width: 36px;
  height: 5px;
  left: 203px;
  top: 385px;
  background: lightgray;
}

width: 36px and height: 5px, forms a thin horizontal bar that represents the metal support arm commonly found on tripod stands.
The left: 203px and top: 385px properties position the brace in the lower section of the stand, bridging the space between the center column and the angled leg.
The connector uses a simple lightgray background.

.first-leg-connector {
  rotate: 34deg;
}

rotate: 34deg property tilts the brace clockwise, allowing it to follow the direction of the first leg and creating a natural-looking connection between both components.

Now that the First Leg Connector is completed let’s work on the Second Leg Connector.

The Second Leg Connector, is the support brace that links the central stand column, .stand-tripod-base, to .stand-second-leg. It helps reinforce the tripod structure while adding realistic detail to the drum stand.

/* Second Leg Connector */
.second-leg-connector {
  width: 57px;
  height: 5px;	
  left: 253px;
  top: 395px;
  background: lightgray;
}

The Second Leg Connector uses a width of 57px and a height of 5px, creating a long, thin support bar that spans the wider distance between the center column and the right leg.

Positioned at left: 253px and top: 395px, it sits flush against the right side of the tripod base and extends outward toward the leg. For styling, the connector currently uses a simple lightgray background as a placeholder color.

.second-leg-connector {
  rotate: -3deg;
}

The rotate: -3deg property applies a slight counter-clockwise tilt, allowing the brace to follow the natural angle of the leg and making the stand appear more mechanically accurate.

Let’s finish this section by completing the Third Leg Connector.

The Third Leg Connector is a support brace that links the central stand column, .stand-tripod-base, to .stand-third-leg. Although it is the smallest of the three connectors, it plays an important role in completing the tripod structure and helping the stand look sturdy and balanced.

/* Third Leg Connector */
.third-leg-connector {
  width: 32px;
  height: 5px;
  left: 214px;
  top: 419px;
  background: lightgray;
}

With a width of 32px and a height of 5px, the Third Leg Connector forms a short, narrow support bar. Its position, defined by left: 214px and top: 419px, places it near the lower section of the tripod base where the third leg extends outward. It’s background color is set to lightgray, similar to the other connectors.

.third-leg-connector {
  rotate: 123deg;
}

The rotate: 123deg property turns the bar sharply, allowing it to align naturally with the angle of the third leg and create a realistic mechanical connection.

.third-leg-connector {
  border-radius: 5px 0 0 5px;
}

To enhance the appearance, border-radius: 5px 0 0 5px rounds only the left corners while leaving the opposite end flat. This subtle detail helps the connector resemble a metal brace attached to a joint or hinge.

In the next section let’s start working on the First Leg component.

First Leg

In this section, you’ll learn how to create the First Leg of the tripod stand. Positioned on the left side of the central support column, it extends outward to help form the stable three-legged base that supports the snare drum.

/* First Leg */
.stand-first-leg {
  width: 12px;
  height: 122px;
  left: 204px;
  top: 294px;
  background: gray;
}

The width: 12px and height: 122px properties create a tall, narrow shape that resembles a metal support leg. Using left: 204px and top: 294px, the leg is placed slightly to the left of the tripod base.

For now, background: gray serves as a placeholder color during development.

.stand-first-leg {
  rotate: 20deg;
}

rotate: 20deg angles the First Leg outward to achieve the characteristic spread of a tripod stand.

.stand-first-leg {
  border-radius: 0 0 5px 5px;
}

border-radius: 0 0 5px 5px rounds the bottom corners, giving the leg a smoother and more realistic appearance while keeping the top edge flat where it connects to the stand hardware.

Let’s work on the Second Leg in the following section.

Second Leg

The Second Leg positioned on the right side of the central support column, this leg extends outward to help form the drum stand's stable three-legged base.

/* Second Leg */
.stand-second-leg {
  width: 12px;
  height: 165px;
  left: 295px;
  top: 286px;
  background: gray;
}

The width: 12px and height: 165px properties create a long, narrow shape that resembles a metal support tube. Compared to the first leg, this leg is taller, allowing it to reach farther toward the right side of the illustration.
The left: 295px and top: 286px properties places the Second Leg beside the tripod base.
For now, background: gray acts as a placeholder color and will be replaced with gradients in subsequent articles.

.stand-second-leg {
  rotate: -26deg;
}

The rotate: -26deg property angles it outward to the right, creating the wide stance typical of a tripod stand.

.stand-second-leg {
  border-radius: 0 0 5px 5px;
}

The border-radius: 0 0 5px 5px property rounds the bottom corners, giving the leg a smoother and more realistic appearance while keeping the top edge flat where it connects to the stand hardware.

Let’s move on the the last section and make the Third Leg.

Third Leg

We’ll close the article by completing the Third Leg of the snare drum stand. It’s positioned near the center of the stand, this leg extends toward the foreground, helping complete the three-legged support structure and adding depth to the illustration.

/* Third Leg */
.stand-third-leg {
  width: 12px;
  height: 194px;
  left: 218px;
  top: 296px;
  background: darkgray;
}

Dimensions (width: 12px, height: 194px): This is the tallest leg of the three (194px vs. 122px and 165px). In an isometric projection, the foreground leg stretches furthest down toward the viewer to establish clear front-to-back perspective and depth.
Positioning (left: 218px, top: 296px): Anchored right below the center column joint (top: 296px) and aligned near the center-left horizontal axis (left: 218px).
Shading (background: darkgray): Uses a lighter gray placeholder than the other two legs.

.stand-third-leg {
  rotate: 8deg;
}

Rotation (rotate: 8deg): Tilts clockwise by a subtle 8°, directing the leg forward and slightly left to ground the center-front of the tripod stand.

.stand-third-leg {
  border-radius: 0 0 5px 5px;
}

border-radius: 0 0 5px 5px: Keeps the top joint edges flat (0px) so they tuck neatly under the drum hardware while rounding the bottom corners (5px) to form a rubber foot pad.

You can see and play with the complete code on Pyxofy’s CodePen page.

See the Pen CSS Art – shape() Function & Gradients: Build an Isometric Snare Drum by Pyxofy (@pyxofy) on CodePen.

Conclusion

Congratulations! You've built the foundation of an isometric snare drum while exploring many essential CSS concepts. Mastering pure CSS art combines precise geometry with smart styling.

Throughout this article, you used position, left, top, width, and height to place elements precisely, and border-radius sculpting standard rectangles into organic, isometric ellipses. Modern rotate properties align the tripod legs and support connectors seamlessly.

These fundamental CSS properties empower you to build complex, lightweight vector illustrations entirely in the browser without relying on external image files, opening the door to more creative and advanced design projects.

How will you apply the above CSS techniques to your next project? Share your masterpiece with us on LinkedIn, Threads, Bluesky, Mastodon, X (Twitter) @pyxofy, or Facebook.

We hope you liked this article. Kindly share it with your network. We appreciate it.

Share on LinkedIn

Post on X (Twitter)