Guida: Creare un’immagine esagonale con CSS

In questa guida vedremo semplicemente come creare un’immagine esagonale con CSS senza dover usare programmi di grafica. Procediamo:

HTML

<div class='esagono'>
   <img src='http://landofworld.altervista.org/wp-content/uploads/2014/05/leagueoflegends3.jpg' alt='esagono'>
</div>

CSS

.esagono {
   -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}