JSFiddle - React, Tailwind, and code Playground

by jnz31

HTML

<div class="hexagon pic">
    <span class="top" style="background: url(http://placekitten.com/400/400/)"></span>
    <span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>
    <span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span>
</div>


<div class="hexagon">
    <span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
    <span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
    <span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
</div>

<div class="hexagon">
    <span class="top"><img src="http://placekitten.com/400/400/" /></span>
    <span class="middle"><img src="http://placekitten.com/400/400/" /></span>
    <span class="bottom"><img src="http://placekitten.com/400/400/" /></span>
</div>


<style>
    .top {
        height:0;
        width:0;
        display: block;
        border:20px solid red;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:red;
        border-left-color:transparent;
    }

    .middle {
        height: 20px;
        background: red;
        width: 40px;
        display: block;
    }
    .bottom {
        height:0;
        width:0;
        display: block;
        border:20px solid red;
        border-top-color:red;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:transparent;
    }
</style>