而在 clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%) 中，依次列出了 10 个坐标点。我们的图形就是依次连接这 10 个坐标点形成一个裁切图形。
当然，这里采用的是百分比，也可以使用具体的数值。
clip-path 动画clip-path 另外一个强大之处在于可以进行 CSS transtion 与 CSS animation，也就是过渡和动画。
看一个多边形的过渡切换动画。
CodePen Demo -- Clip-path 多边形过渡动画
图形变换动画除此之外，我们还可以尝试，将一个完整的图形，分割成多个小图形，这也是 clip-path 的魅力所在，纯 CSS 的图形变换：
CodePen Demo -- Clip-path triangle2rect
clip-path 动画的局限clip-path 动画虽然美好，但是存在一定的局限性，那就是进行过渡的两个状态，坐标顶点的数量必须一致。
也就是如果我希望从三角形过渡到矩形。假设三角形和矩形的 clip-path 分别为：
进行过渡动画时候，直接从 polygon(50% 0, 0 100%, 100% 0) --> polygon(0 0, 100% 0, 100% 100%, 0 100%) 是不行的，因为是从 3 个坐标点变换到 4 个坐标点。
因此这里需要这用一个讨巧的办法，在三角形的表示方法中，使用四个坐标点表示，其中两个坐标点进行重合即可。也就是：
如果脑洞够大，随机生成 N（N>=1000）边形，进行变换，会是什么效果呢？
see one see：
CodePen Demo -- 2000边形过渡动画
变换的瞬间很有爆炸的感觉。不过这里有个很大的问题，只是随机生成了 2000 个坐标点，然后使用 clip-path 将这些坐标点连接起来，并不是符合要求的多边形。
在 ，有下面这样一个例子，一个规则的多边形进行不断的过渡动画，非常酷炫：
VUE官网使用的是 SVG 实现的，这里我稍微改变了下，使用 CSS clip-path 实现：
CodePen Demo -- clip-path N polygon ，感兴趣可以看看。
shape-outside
最后再来看看 shape-outside，另外一个有趣的有能力生成几何图形的属性。
shape-outside 是啥？它也有制造各种几何图形的能力，但是它只能和浮动 float 一起使用。
虽然使用上有所限制，但是它赋予了我们一种更为自由的图文混排的能力。
先看看它的 API，看上去貌似很复杂：
{ /* Keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* Function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); /* <url> value */ shape-outside: url(image.png); /* Gradient value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* Global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; }
但是，其实它和 clip-path 的语法非常类似，很容易触类旁通。看看实例，更易理解：
大家自行去熟悉下 API，接着假设我们有下面这样的结构存在：
<div> <div> <img src="image.png"> </div> xxxxxxxxxxx，文字描述，xxxxxxxxx </div>
定义如下 CSS：
.shape-outside { width: 160px; height: 160px; shape-outside: circle(80px at 80px 80px); float: left; }
注意，上面 .shape-outside 使用了浮动，并且定义了 shape-outside: circle(80px at 80px 80px) ，表示在元素的 (80px, 80px) 坐标处，生成一个 80px 半径的圆。
如此，将会产生一种图文混排的效果：
CodePen Demo -- 图文混排 shape-outside
嗯？好像没什么了不起啊？这不就是 float 的效果吗？
不，不是的，看看 float 和 加上shape-outside 后的对比：
看出区别了吗？使用了 shape-outside ，真正的实现了文字根据图形的轮廓，在其周围排列。
上图是使用开发者工具选取了作用了 shape-outside 的元素，可以看到，使用了特殊的蓝色去标记几何图形的轮廓。在这个蓝色区域之外，文字都将可以进行排列。
shape-outside 的本质划重点，划重点，划重点。
所以，shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让文字能排列在这些被裁剪区域之内。
所以，了解了这个本质之后，我们再看看一些更复杂的图文混排。
平行四边形
CodePen Demo -- 图文混排 shape-outside
心形、菱形
CodePen Demo -- 图文混排 shape-outside
clip-path 与 shape-outside 的兼容性额，比较遗憾，这两个属性的兼容性目前仍处于比较尴尬的境地。感兴趣的可以看看 CANIUSE 。全面兼容使用仍需努力。
所以本文所展示的 Demo 都是在 -webkit- 内核浏览器下完成的。
最后
系列 CSS 文章汇总在我的 Github 。
到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
相关文章
精彩导读
热门资讯
关注我们
