前端 CSS 经典：clip-path 裁剪

yqcoder

于 2024-06-21 00:04:27 发布

阅读量256

点赞数 2

分类专栏：前端 CSS 经典文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64684095/article/details/139845271

版权

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

36 篇文章 1 订阅

订阅专栏

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