关于css裁剪的使用:

1>clip-path 介绍
clip-path 是一种 CSS 属性，用于定义一个裁剪区域，只显示该区域内的内容，其余部分被裁剪掉，不会显示。
  
作用原理：
它为元素定义了一个裁剪区域（例如矩形、圆形、多边形等）。
只有在这个裁剪区域内部的内容会被渲染。
剩余的部分被隐藏，但仍然存在于 DOM 中。
  
语法:
clip-path: shape;
  
2>举例子
<div class="example"></div>
  
.example {
  width: 200px;
  height: 100px;
  background: linear-gradient(90deg, red, blue);
  clip-path: polygon(20% 43%, 80% 43%, 80% 57%, 20% 57%);
  transition: clip-path 0.3s ease;
}
  
原理解析：
polygon() 定义了一个多边形，顶点的顺序是关键，按顺时针或逆时针连接点定义形状。
坐标值的格式是 x y，分别表示水平（x）和垂直（y）的偏移。
每个坐标点之间用逗号分隔，20% 43% 表示从元素左上角出发，水平偏移 20%，垂直偏移 43%。
这个多边形的定义细节：
第一点 (20% 43%): 多边形从左侧 20%，高度 43% 的点开始。
第二点 (80% 43%): 延伸到右侧 80%，高度仍为 43%。
第三点 (80% 57%): 向下延伸到高度 57%。
第四点 (20% 57%): 左移回到左侧 20%，高度仍为 57%。
这四个点连接起来，就形成了一个宽为 60%（80%-20%），高为 14%（57%-43%）的水平矩形。
  
裁剪后的视觉效果:
元素只显示 clip-path 定义的矩形区域内的部分。
矩形外部的内容会被裁剪掉，像是被一个“模板”遮住。
  
裁剪后的元素大小:
即使元素被 clip-path 裁剪，它的实际布局区域（包括宽度和高度）仍然保留不变。元素的布局大小由 CSS 的 width 和 height（或其内容）决定，与裁剪后的形状无关。裁剪仅改变渲染效果，不会改变元素在文档流中的尺寸或占位。
  
3>使用这个创建svg图片
<svg width="200" height="100">
      <defs>
        <clipPath id="clip">
          <polygon points="100,0 200,50 100,100 0,50" />
        </clipPath>
      </defs>
      <rect width="200" height="100" fill="red" clip-path="url(#clip)" />
    </svg>
  
这里：
<rect> 标签：
定义了一个宽为 200px、高为 100px 的矩形。
fill="red" 指定矩形的填充颜色为红色。
  
这个其实是定义了裁剪的外部区域，而不是以svg的width 和 height定义的，也可以设置 <rect width="100" height="50" fill="red" clip-path="url(#clip)" />，就会发现另一种效果. 但是一般会和svg设置相同的width和height。