Sample code for implementing honeycomb/hexagonal atlas with CSS

I don’t know why, but UI likes to design honeycomb effects (spreading hands)

1. Realizing the Hexagon

First, let’s analyze the hexagon in a traditional way.

It can be split into three rectangles, each of which is rotated by plus or minus 60° to get the other two rectangles.

From this, the basic HTML structure can be designed

The width and height of the rectangle are set randomly first, and then their relationship is calculated when components are formed, and set through props

Then set the CSS style

.w-comb { background-color: #e4e4e4; display: inline-block; position: relative;
} .w-comb-sub1, .w-comb-sub2 { background-color: #e4e4e4; position: absolute; width: inherit; height: inherit;
} .w-comb-sub1 { transform: rotate(-60deg);
} .w-comb-sub2 { transform: rotate(60deg);
}

A hexagon is complete.

However, this is just a traditional way. If you don’t consider compatibility issues , you can directly use clip-path to draw a hexagon.

.w-comb { clip-path: polygon( 0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75% );
}

Very simple and crude! No child nodes or rotations are needed, just one line of code and you can take the hexagon home!

2. Set the size

The actual application scenario is usually a bunch of hexagons put together, so a single hexagon needs to be processed as a component

The first question is how to set the size of the hexagon, which requires the math knowledge learned in junior high school.

After calculation, when the length of the rectangle is x, the width (side length a) is

The diagonal line b is

Then we can specify the size of the hexagon

If it is a traditional solution formed by rotating three rectangles:

// Traditional solution const RADICAL_3 = 1.7320508; const Comb = (props) => { const { className } = props; const width = props.size || 80; const height = Math.ceil(width / RADICAL_3); return ( <div className={`w-comb ${className}`} style={{ width, height, }}>
      <div className={'w-comb-sub1'}></div>
      <div className={'w-comb-sub2'}></div>
    </div> ) }

If the hexagon is drawn directly using clip-path :

// clip-path
const RADICAL_3 = 1.7320508; 
const Comb = (props) => {
                           const { className } = props;
                           const width = props.size || 80; const height = 2 * Math.ceil(width / RADICAL_3); 
                           return ( <div className={`w-comb-test ${className}`} style={{ width, height, }}></div>) 
			 }

3. Arrange the honeycomb

Define a spacing field to set margin-right, and then arrange a row of hexagons

When generating the second row, you need to adjust top and left

left is half the length of the rectangle ( x ) (this is the base offset, the actual distance required is added to this number)

The top is half of half the length of the hexagon side (a) (base offset)

The top of each subsequent row will increase, and left will only take effect on even-numbered rows.

4. Add content

In the traditional scheme, the horizontal rectangle is the basis, so the content of the hexagon can be written directly in the rectangle.

This concludes this article about sample code for implementing honeycomb/hexagonal atlas with CSS. For more relevant CSS hexagonal atlas content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!