CSS Art – Using polygon() and scale() Functions Together

Introduction

The CSS polygon() and scale() functions allow you to create repeating patterns. Combine that with color gradients and a hint of drop shadow, and your CSS images will undoubtedly pop!

This article introduces the following CSS functions and properties:

• polygon()
• scale()
• linear-gradient()
• radial-gradient()
• drop-shadow

Preview

The Hexagons image consists of four hexagon shapes of varying sizes made using the polygon() and scale() functions. You will apply color gradients to each hexagon using both the CSS linear-gradient() and radial-gradient() functions. Additionally, you’ll utilize the drop-shadow() function to create a shadow effect for the hexagons.

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">
  <div class="hexagon-shadow">
    <div class="hexagon-1 hexagon"></div>
  </div>
  <div class="hexagon-shadow">
    <div class="hexagon-2 hexagon"></div>
  </div>
  <div class="hexagon-shadow">
    <div class="hexagon-3 hexagon"></div>
  </div>
  <div class="hexagon-shadow">
    <div class="hexagon-4 hexagon"></div>
  </div>
</div>

container is the outermost enclosure. It enables the content to be centered and draws a light gray border. The rest of the divs 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 {
  min-width: 500px;
  height: 500px;
  border: 5px solid lightgray;
  background: white;
  position: relative;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Shared Properties

You will consolidate shared CSS properties to enhance code manageability and comply with the “Don’t Repeat Yourself” (DRY) coding principle.

/* Shared Properties */
.hexagon,
.hexagon-shadow,
.hexagon-1,
.hexagon-2,
.hexagon-3,
.hexagon-4 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

All image components’ position property value is set to absolute and will be centered using the display: flex, justify-content, and align-items properties.

To ensure all hexagon shapes remain consistent, you’ll use the CSS polygon() function to create a shape template.

/* Shape Template */
.hexagon {
  width: 400px;
  height: 400px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

The .hexagon shape template’s width and height are set to 400px. Using the illustration below, let’s break down the polygon() function values.

The comma-separated values correspond to the hexagon points as follows:

① 50% 0%

② 100% 25%

③ 100% 75%

④ 50% 100%

⑤ 0% 75%

⑥ 0% 25%

① starts at the top, and the consecutive points are positioned clockwise, ending with ⑥ at the upper left-hand corner.

Check this article out for a more in-depth explanation of the polygon() function.

You will be using both the CSS linear-gradient() and radial-gradient() functions to create the Hexagon’s background gradients. Hop over to this article if you’re unfamiliar with CSS gradients.

Having completed the shared properties, let’s proceed to the next section and begin creating the hexagons.

Hexagons

Now, let’s begin making the hexagons. Here, you will apply color gradients to each hexagon shape and utilize the CSS scale() function to modify their size.

.hexagon-1 {
  background: linear-gradient(200deg, #6e4ff8, #2708b5 65%);
}

hexagon-1 color gradient will start at 200deg with a very light blue, #6e4ff8, and transition to a neon blue, #2708b5, at around the 65% mark.

.hexagon-2 {
  background: linear-gradient(200deg, #4fa0f8, #085bb5 60%);
  transform: scale(0.8);
}

• The second hexagon gradient begins with a blue jeans hue, #4fa0f8, and transitions to a sapphire blue, #085bb5 at the 60% mark.
• The transform: scale(0.8) reduces the hexagon’s default size to about 80%.

.hexagon-3 {
  background: linear-gradient(200deg, #4ff8de, #08b95b 45%);
  transform: scale(0.6);
}

You use scale(0.6) to reduce the hexagon’s size to approximately 60% of its original size. #4ff8de is a turquoise hue and #08b95b is a green shade.

.hexagon-4 {
  background: radial-gradient(circle at 90% 10%, #fcc891, #ed7e07 50%);
  transform: scale(0.4);
}

The final hexagon has been scaled down to 40% of its original size using scale(0.4). With the radial-gradient() function, you create a color gradient that transitions from peach-orange #fcc891 to tangerine #ed7e07.

Applying Drop Shadow

For the final section, you’ll apply a drop shadow effect to the hexagons.

Since the hexagon shape is made using the clip-path: polygon() function, you won’t be able to apply the drop-shadow() function directly on the hexagon shapes. Instead, you will apply it to a parent HTML element.

<div class="hexagon-shadow"> <!-- Drop shadow applied here -->
  <div class="hexagon-1 hexagon"></div>
</div>

The parent element of the hexagon is hexagon-shadow, to which you will apply the drop shadow effect.

.hexagon-shadow {
  filter: drop-shadow(-2px 3px 2px #2229);
}

• -2px is the horizontal offset, which puts the shadow on the left side of the hexagon
• 3px is the vertical offset and sets the shadow below the hexagon
• 2px will be the shadows’s blur value
• #2229 is a black shade

You can check out this article to learn more about the limitations of clip-path: polygon() when applying drop shadows.

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

See the Pen CSS Art – Using polygon() and scale() Functions Together by Pyxofy (@pyxofy) on CodePen.

Conclusion

Using the CSS scale() and polygon() functions together broadens your design palette, enabling you to create interesting patterns. Although initially tricky, incorporating drop shadows into shapes created with polygon() becomes easier once you master the technique, enabling you to apply it across various design elements.

Using linear-gradient() and radial-gradient() functions together to design gradient backgrounds is fun. It adds depth and makes your shapes stand out.

Continue honing your CSS skills and share your masterpiece with us on LinkedIn, Threads, Mastodon, X (Twitter) @pyxofy, or Facebook.

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

Related Articles