Combining and aligning multiple divs into a single shape - html

Question

I am trying to create a hexagon using CSS. There are a number of questions about this already, but in my specific case I need it composed of 3 identical shapes that are different colors.
There are 2 specific requirements:
The overall size of the hexagon must be controllable by a single value. In my case that is the width of the .hexagon-wrapper class
The hexagon shape must be centered horizontally and vertically within it's parent (.hexagon-wrapper), and that wrapper must also be centered horizontally and vertically within its parent (the outermost div)
You'll notice there are some problems with my attempt:
The 3 pieces that make up the hexagon arent tightly aligned,
and the overall shape starts to break apart when you change
.hexagon-wrapper width
I'm using some magic numbers to translate the individual pieces, and they don't guarantee that the pieces will stick together after resizing, nor do they really guarantee that the elements are perfectly centered horizontally and vertically
Is there an easier way to do this, or some simple math that I'm missing? Basically, how do I keep the pieces together, and how do I ensure everything is centered?
I did consider creating a 3D cube and using transform3d to ensure everything sticks together, but I do not want to go with this approach because I have had many anti-aliasing issues when using transform3d and want to avoid that altogether
.hexagon-wrapper {
display: flex;
position: relative;
background-color: green;
width: 40%;
height: 100%;
margin: auto;
}
.hexagon-part-red {
position: relative;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
transform: translate(112%, -50%) rotate(-60deg) skewY(30deg);
background: red;
margin: auto;
}
.hexagon-part-yellow {
position: relative;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
transform: translate(-49%, 25%) rotate(0deg) skewY(30deg);
background: yellow;
margin: auto;
}
.hexagon-part-blue {
position: relative;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
transform: translate(-69%, 25.1%) rotate(60deg) skewY(30deg);
background: blue;
margin: auto;
}
<div>
<span class="hexagon-wrapper">
<div class="hexagon-part-red"></div>
<div class="hexagon-part-yellow"></div>
<div class="hexagon-part-blue"></div>
</span>
</div>

Answer 1

Here is an easier idea where you don't need any complex calculation and a lot of transform:
.hexagon-wrapper {
position: relative;
background-color: green;
width: 40%;
margin: auto;
display: flex;
justify-content: center;
}
.hexagon-part-red,
.hexagon-part-yellow,
.hexagon-part-blue {
width: 30%;
display: inline-flex;
}
.hexagon-part-red:before,
.hexagon-part-yellow:before,
.hexagon-part-blue:before {
content: "";
padding-top: 115.47%; /* 100/cos(30deg) */
}
.hexagon-part-red {
position: absolute;
top: -50%;
height: 100%;
width: 60%;
background: red;
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.hexagon-part-yellow {
transform: skewY(30deg);
transform-origin: left;
background: yellow;
}
.hexagon-part-blue {
transform: skewY(-30deg);
transform-origin: right;
background: blue;
}
body {
margin: 0;
display: flex;
height: 100vh;
}
<div class="hexagon-wrapper">
<div class="hexagon-part-red"></div>
<div class="hexagon-part-yellow"></div>
<div class="hexagon-part-blue"></div>
</div>