学习笔记 - clip-path 绘制图形

°青

于 2024-08-19 17:55:37 发布

阅读量262

点赞数 5

分类专栏：前端学习文章标签：学习笔记 html

本文链接：https://blog.csdn.net/weixin_44792197/article/details/141326904

版权

前端学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

学习示例

用 clip-path 创建一个包含直线、向下弧线、再向上弧线以及另一条直线的形状，并进行多个方面的转换

示例1：

clip-path: path("M0 0 L0 50 Q 50 100, 100 50 Q 150 0, 200 50 L200 0 Z");

示例2：

clip-path: path("M0 100 L0 50 Q 50 0, 100 50 Q 150 100, 200 50 L200 100 Z")

将“示例1”进行上下翻转，你需要调整 y 坐标。假设路径的 y 范围是从 0 到 100，你需要将 y 坐标从 0 到 100 反转，变成100 到 0。

示例3：

clip-path: path("M200 0 L200 50 Q 150 100, 100 50 Q 50 0, 0 50 L0 0 Z");

将“示例1”进行左右翻转，即调整 x 坐标。假设路径的 x 范围是从 0 到 200，你需要将 x 坐标从 0 到200 反转，变成 200 到 0。

示例4：

clip-path: path("M200 100 L200 50 Q 150 0, 100 50 Q 50 100, 0 50 L0 100 Z");

将“示例1”进行上下翻转，你需要调整 y 坐标。假设路径的 y 范围是从 0 到 100，你需要将 y 坐标从 0 到 100 反转，变成100 到 0。
再进行左右翻转，即调整 x 坐标。假设路径的 x 范围是从 0 到 200，你需要将 x 坐标从 0 到200 反转，变成 200 到 0。

解释

clip-path: path() 使用 SVG 路径语法来定义剪切路径。

完整代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip-Path Example</title>
  <style>
    .clip-path-shape {
        width: 300px;
        height: 100px;
        background: #f00;
        // clip-path: path("M0 0 L0 50 Q 50 100, 100 50 Q 150 0, 200 50 L200 0 Z"); // 示例1
        // clip-path: path("M0 100 L0 50 Q 50 0, 100 50 Q 150 100, 200 50 L200 100 Z"); // 示例2
        // clip-path: path("M200 0 L200 50 Q 150 100, 100 50 Q 50 0, 0 50 L0 0 Z"); // 示例3
        // clip-path: path("M200 100 L200 50 Q 150 0, 100 50 Q 50 100, 0 50 L0 100 Z"); // 示例4
    }
  </style>
</head>
<body>
  <div class="clip-path-shape"></div>
</body>
</html>

CSS 示例（一）——波浪弧形

 clip-path: path("M0 100 Q 50 0, 100 100 T 200 100 T 300 100 T 400 100 V 200 H 0 Z"); // 波浪弧形

解释

M0 100 ：移动到起点 (0, 100)。
Q 50 0, 100 100 ：绘制一个二次贝塞尔曲线，从 (0, 100) 到 (100, 100)，中间控制点为 (50, 0)。
T 200 100 ：绘制平滑的二次贝塞尔曲线到 (200, 100)，自动计算控制点。
T 300 100 和 T 400 100 ：继续绘制平滑的波浪曲线。
V 200 ：绘制一条垂直线到 Y = 200。
H 0 ：水平绘制直线回到 X = 0。
Z ：闭合路径。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip-Path Example</title>
  <style>
    .clip-path-shape {
      width: 300px;
      height: 100px;
      background: #f00;
      clip-path: path("M0 100 L0 50 Q 50 0, 100 50 Q 150 100, 200 50 L200 100 Z");
    }
  </style>
</head>
<body>
  <div class="clip-path-shape"></div>
</body>
</html>

最终效果

CSS 示例（二） ——正方形

clip-path: path("M 10 10 H 90 V 90 H 10 L 10 10"); // 正方形

最终效果

CSS 示例（二） ——残缺的圆形

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 100 100 z'); // 残缺的圆形

最终效果

以上是本次分享全部内容。
非常感谢您阅读本篇博客文章。希望这篇文章能够为您提供有价值的信息，并帮助您解决问题或增长知识。如果您对文章内容有任何问题、建议或反馈。同时，也欢迎您继续关注我的博客，获取更多有趣、实用的内容。
期待与您在下一篇文章再次见面。谢谢！

°青

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习笔记 - clip-path 绘制图形

clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
复制链接

扫一扫

专栏目录