How to Create Hexagons with Colored Borders and Outlines?

Creating Hexagons with Borders and Outlines

When crafting hexagonal shapes using borders through pseudo elements, directly incorporating different colors for the fill and outline proves challenging. However, there is a viable alternative: overlaying hexagons within hexagons.

Example:

[Image: Example of hexagons with colored outlines]

Live Example:

[Link to live hexagon example]

HTML:

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

CSS:

Hexagon Base:

<code class="css">.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}</code>

Inner Hexagons:

<code class="css">.hex.inner {
    background-color: blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    background-color: red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}</code>

By overlaying hexagons of different colors, this approach achieves the desired effect of a hexagon with a colored border and a different fill color.

The above is the detailed content of How to Create Hexagons with Colored Borders and Outlines?. For more information, please follow other related articles on the PHP Chinese website!