Home > Article > Web Front-end > How can I create a hexagon with both a fill and an outline of different colors using CSS?
Hexagon Shape with Border and Fill
The following code creates a hexagon shape with a solid background color and a transparent border:
.hex:before { content: " "; width: 0; height: 0; border-bottom: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; position: absolute; top: -30px; } .hex { margin-top: 30px; width: 104px; height: 60px; background-color: #6C6; position: relative; } .hex:after { content: ""; width: 0; position: absolute; bottom: -30px; border-top: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; }
To achieve a hexagon with both a fill and an outline of different colors, a different approach is required. Here's an alternative method using layered hexagons:
<code class="html"><div class="hex"> <div class="hex inner"> <div class="hex inner2"></div> </div> </div></code>
<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; } .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>
This method creates three layers of hexagons with decreasing sizes and different colors, giving the appearance of a filled hexagon with an outline.
The above is the detailed content of How can I create a hexagon with both a fill and an outline of different colors using CSS?. For more information, please follow other related articles on the PHP Chinese website!