前端 CSS 经典：clip-path 裁剪

最新推荐文章于 2025-06-17 03:24:13 发布

原创最新推荐文章于 2025-06-17 03:24:13 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端 CSS 经典专栏收录该内容

39 篇文章

订阅专栏

前言：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>