CSS hexagon

by moob

HTML

<section>
    How about this one?
    <div class="hexagon">
        <div class="hexagon-wrapper">
            <div class="hexagon-content">I'm a hexagon that fills its bounds. Resize the window (or resize my parent in css)</div>
        </div>
    </div>
</section>

CSS

section {
    width: 60%;
    margin: 20%;
}

.hexagon {
    position: relative;
    width: 100%;
    padding-bottom: 115.473441109%; /* or calc(100%/0.866); = width /0.866 */
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
}

.hexagon .hexagon-wrapper {
    position: absolute;
    visibility: visible;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hexagon .hexagon-wrapper > .hexagon-content {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: blue;
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    /* use flexbox (or an alternative of your choosing) to center content vertically*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* want it wierdly blurred?
-webkit-backface-visibility:hidden;
*/
}