JSFiddle - React, Tailwind, and code Playground

by Eric

HTML

<div class="hexagon pic">
    <span class="top"></span>
    <span class="bottom"></span>
</div>

CSS

.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid red;
    border-right: 100px solid red;
    width: 200px;
}

.top {
    top: 0;
    border-bottom: 173px solid transparent;
}

.bottom{
    bottom: 0;
    border-top: 173px solid transparent;
}

.hexagon {
    background: url(http://placekitten.com/400/400/);
    width: 400px;
    height: 346px;
    position: relative;
}