Home > Web Front-end > CSS Tutorial > How to Create Hexagons with Colored Borders and Outlines?

How to Create Hexagons with Colored Borders and Outlines?

Barbara Streisand
Release: 2024-11-01 04:49:02
Original
607 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template