DIV 变形

Css 的 border 属性绘制几何体

• 圆形、椭圆
  最简单最常见的，设置 border-radius 即可。圆形将 div 宽高设为一致， border-radius 设为 50%；椭圆 border-radius 设置为所需的值即可。
• 三角形、多边形
  将宽高设为 0，其中一条边 border 设为宽度 0，其他三条边给宽度、颜色即可。
  
  多边形，可以将其拆分，示例的五边形为了明显一点用了不同颜色，需要正五边形之类的得计算一下具体的 width、left 数值。
  
  注：border 方法其实有点伪变形，透明的地方是可点击交互的。

transform 属性进行 2D 或 3D 转换

css 的 transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。用得比较多的值 scale、translate、rotate、skew 等等这里就不多讲述了，无论是旋转还是拉伸什么的，本质上都是应用的 matrix()、matrix3d()方法实现的（修改 matrix() 方法固定几个值）。matrix 和 matrix3d 的值调起来很费劲也不容易理解。这里介绍个好用的网站https://www.useragentman.com/matrix/# 打开是这样的

粉色块是变形前的 div，紫色块是变形后的 div，紫色块的四个角可以进行拖拽，同时上方 matrix3d 的值变化。用项目上的例子做个演示：

• 先点击 1 处，显示可以紫色块的配置项，比如说 UI 给的切图是 482*342 的，修改下 2 处几个点的值就可修改粉色块的宽高。
• 打开 F12，找到粉色块的 div 如图 3 处，修改背景图为 UI 给的切图，修改宽
  高为图片的宽高，建议在 4 处#01 这里改，内联样式会在拖拽点的时候变化。
• 拖拽紫色块的 4 个点到需要 div 显示的地方，适配背景图，得到最终需要的值如 5 处。

path 使用裁剪方式创建元素的可显示区域

css 的 clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。
区域内的部分显示，区域外的隐藏。clip-path 工作原理是提供一系列的 X 和 Y 值来创建路径，当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。剪切区域是被引用内嵌的 URL 定义的路径或者外部 svg 的路径，或者作为一个形状。

clip-path：clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

• basic-shape：inset | circle | ellipse | polygon。把元素剪裁为基础形状。

  • inset(top, right, bottom, left, round radius)。定义一个矩形，可以传入 5 个参数，分别对应 top,right,bottom,left 的裁剪位置,round radius（可选，圆角）。
  • circle(radius, at position)。定义一个圆。radius 圆的半径，at position 圆心位置，默认为元素中心点。
  • ellipse( radius-x, radius-y, at position )。定义一个椭圆。参数：
    • 椭圆的 X 轴半径，默认是宽度的一半，支持百分比
    • 椭圆的 Y 轴半径，默认是高度的一半，支持百分比
    • 椭圆中心位置，默认是元素的中心点
  • polygon( ? , [ ]# )。定义一个多边形，可选，表示填充规则用来确定该多边形的内部。可能的值有 nonzero 和 evenodd,默认值是 nonzero，后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点
    
    推荐网站 https://bennettfeely.com/clippy/，集合了常用图形，且可手动拖拽图形生成参数。

• clip-source：可以是内、外部的 SVG 的元素的 URL 引用。这是下面代码中 class 为 clip 的 div 原始模样。
  
  定义一个 id 为“svgPth”的 clipPth，path 为要剪裁的路径，在项目中可以由 UI 提供 svg 切图，自己替换下路径