• HTML
• CSS

HTML

<h1>Uso del clip-path</h1>
<div class="contenedor">
    <img src="Monkey_D_Luffy.png" alt="">
</div>

CSS

*{
    box-sizing:border-box;
}
body{
    margin:0em;
}
h1{
    text-align:center;
}
.contenedor{
    background:#76d7c4;
}
.contenedor>img{
    margin:0rem auto;
    cursor:pointer;
}
img{
    width:auto;
    display:block;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    transition:0.3s all;
}

img:hover{
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}