css菱形

在这里插入图片描述

<div class="main">
    <img src="./1.png" alt="">
</div>
<style>
    img{
        width: 150px;
        clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
        transition: 1s clip-path;
    }
    img:hover{
        clip-path:polygon(0 0,100% 0,100% 100%,0 100%)
    }
</style>
版权声明：本文为weixin_41824429原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。