How to create a hexagon in Webflow

There is a known method of creating a different shapes using CSS clip-path property. Unfortunately, it still not supported by Edge and IE11 browsers.

Here is a method that will let you create highly customizable hexagon shape in Webflow. It can be filled with colors and gradients as well as with images and videos.

Main shape/form will be created by 3 rectangles-divs. Each of them we will turn in a certain angle, but main goal is get a 60 deg angle between hexagon's sides.

STEP 1

External div (hex).

Proportion between width and height of this div will define the angle of the hexagon itself:

  • HEIGHT = 1.15 * WIDTH will create a hexagon with flat side up/down 
  • WIDTH = 1.15 * HEIGHT will create a hexagon with flat side on the right/left

‍

Width = 1.15 * Height
Height= 1.15 * Width

After you decide your hexagon's angle and add the 1st div hex with its size, make it position: relative. Then go to Transforms settings and Rotate it on -30deg on Z-axis.

‍

Width

STEP 2

First internal div (hex-1).

Inside the div hex create the div hex-1 and apply settings:

  • position: absolute,
  • width: 100%,
  • height: 100%

(All next divs will have the same position and size).

Then go to Transforms settings and Rotate hex-1 on 60deg on Z-axis.

Now if you will go back to the hex and set its overflow: hidden you will see how it will start to create hexagons sides

STEP 3

Second internal div (hex-2).

Inside the div hex-1 create the div hex-2 and again apply settings:

  • position: absolute,
  • width: 100%,
  • height: 100%

Then go to Transforms settings and Rotate hex-2 on -120deg on Z-axis.

With settings overflow: hidden applied to hex and hex-1 you will get a hexagon shape

STEP 4

Styling hexagon

Make hex-2 overflow:hidden and now you can style it by adding some colors or gradients. You also can add additional div inside the hex-2 for the content (text, image, bg-video) but don't forget that it needs to be rotated 90deg on Z-axis as well as have position: absolute. Width and height of that div or content can be adjusted accordingly to your needs