嗯， 这里先说一句：如果你不想看代码，也不想学习了解怎么写，只要点点鼠标就能搞定，那就别看了……但是如果你想要把图片或者div做成圆形、椭圆形之类的视觉效果，那就持续往下读吧！.

一、 前言：哪些叫“HTML5裁剪”?

本质上... 很更多人听到“HTML5”就以为是崭新技术手段，崭新标签，崭新特性，其实它只是语义化标签的一种演进而已。至于“裁剪”，较大家常说的是把图片截成某个形状或者较大较小，而不是删除文件。

先别急着写代码！先了解概念：

• CSS Clip 属性: `clip:auto|rect` 能够把块级元素按矩形区域遮住。
• CSS Clip-path 属性: `clip-path:polygon` 或 `circle` 等可做任意更多边形遮罩。
• Canvas API: `ctx.clip` 能够基于路径进行像素级别切割。
• 第三方库: 比如 `Cropper.js`, `Fabric.js` 等封装良好的工具。
• 还有一种叫做 “mask” 的 CSS 技术手段， 用来做半透明遮罩，但这里不探讨。

一句：要做到真实正可交互式裁切， 一般都需要 JS + Canvas； 这玩意儿... 如果只是静态视觉遮罩，就用 CSS 就够了。

二、 纯 CSS 静态例子

以下代码演示了一个圆形头像框，只需要一行 CSS 就能完成：

这段代码很简较短，但是如果你想让它支持 IE11 的话，需要加上一些兼容前缀：，希望大家...

.avatar{
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   border-radius:50%;
}

二点：采用 polygon 做繁杂遮罩

较小技巧：如果你想要一个五边形或者七边形，能够直接写：，操作一波...

.pentagon{
   clip-path:polygon;
}

记住浏览器兼容性也要检查，如果 Safari 不支持，就加上：，好吧好吧...

.pentagon{-webkit-clip-path:polygon;}

三、Canvas 实现动态交互式裁切

下面是一段基本思路，你能够照着改动，再自己调试一下，这事儿我可太有发言权了。。