前言:clip-path 可以把一个元素裁剪成任意你想要的形状。clip-path 裁剪路径生成器,通过改变数值,还可以做出有趣的动画。
效果:
代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style> .img { width: 500px; object-fit: contain; margin: 100px auto; clip-path: polygon( 50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12% ); } </style> </head> <body> <img class="img" src="../../../images/demo素材/img.jpg" /> <script></script> </body> </html>