How Can You Create a Hexagon Shape with a Border Using CSS?

Hexagon Shape with Border and Outline

Creating a hexagon shape using CSS pseudo elements is a well-established technique. However, directly adding a border with a different color can be challenging. This article explores an alternative approach to achieve the desired effect.

By overlaying multiple hexagons with varying sizes and colors, it is possible to create the illusion of a bordered hexagon while maintaining the desired color fill.

Example Implementation

HTML:

<div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div>

CSS:

.hex {
    ...  /* Hexagon shape and basic styles */
}

.hex inner {
    background-color: blue;
    ...  /* Transform and scaling */
}

.hex inner2 {
    background-color: red;
    ...  /* Transform and scaling */
}

Working Principle:

The outermost .hex element defines the shape and color of the base hexagon. Within it, two nested .hex elements are added, each with a different background color. Scaling these inner elements proportionally using transform: scale() shrinks them while maintaining the hexagon shape. The result is an overlay of differently colored hexagons, creating the appearance of a bordered hexagon.

Live Example:

[Hexagon Example](https://www.example.com/hexagon-example/)

Alternatives:

If images are not an option, other alternative techniques include SVG, Canvas, or using a CSS mask property.

The above is the detailed content of How Can You Create a Hexagon Shape with a Border Using CSS?. For more information, please follow other related articles on the PHP Chinese website!