JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<div class="main">
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
</div>
<div class="main">
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
</div>

CSS

.main > div {
    display: inline-block;
    float: left;
}
.hex {
    width:80px;
    height:80px;
    background-image: url(http://placekitten.com/400/400/);
    background-size: cover;
    position:relative;
    margin:10px;
}
.hex:before, .hex:after {
    content:"";
    position:absolute;
    top:0px;
    height:40px;
    width:0px;
    /* 40 = height/2 */
    z-index:1;
    border:20px solid #FFF;
    /*change #FFF to your bg color*/
}
.hex:before {
    left:-20px;
    /* -1*borderWidth */
    border-right:40px solid transparent;
    /* width/2 */
}
.hex:after {
    left:40px;
    /* width/2 */
    border-left:40px solid transparent;
    /* width/2 */
}