Esagoni

[Ciombe]

Salve, avrei bisogno di creare 3 box come immagine allegata, ovvero 3 esagoni.

sul web ho trovato questo codice

<style>
.esagono {
    width: 100px;
    height: 55px;
    background: black;
    position: relative;
}
.esagono:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid black;
}
.esagono:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid black;
}
</style>

<div class="esagono"></div>

ma il fatto è che all'interno dell'esagono devo metterci un immagine o altri elementi per cui questo sistema non soddisfa le mie esigenze, qualcuno sa come devo muovermi?