原文：Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor, by Josh Marinacci
页面布局不一定是四四方方的。历史上，页面中的每个元素都被渲染为矩形，但也可以不是矩形。借助 CSS Shapes 我们可以创建与印刷杂志一样时尚的页面布局，同时又具有网页本身的优势。
CSS Shapes 让你的网页设计突破矩形的限制。所有经典的杂志设计元素，如非矩形文本流和非矩形形状的图像，现在都可以使用低代价的新 CSS 标准实现。文字能够流动，图像可以变圆，一些不平行线条的出现甚至可以使你的网站脱颖而出，让你的品牌与众不同。怎样能够脱颖而出，是当今大多数网站面临的最大挑战，而 CSS Shapes 就可以助你一臂之力。
标准
元素形状只能通过两个 CSS 属性控制：shape-outside 和 clip-path。
shape-outside 属性改变 浮动 DOM 元素外的内容流向，它影响布局，但不影响绘制。clip-path 属性定义 DOM 元素的裁剪路径，路径内的元素内容可见，路径外的不可见，它影响绘制，但不影响布局。
clip-path 属性
右：应用了 shape-outside 属性
因为两个属性是分开的，且控制不同的方面（绘制或布局），你可以根据需要使用它们中的一个或者两个。而且还有一个好消息，它们现在都支持同样的 basic-shape 语法。
将图片裁剪成圆形怎么做？使用 clip-path: circle(50%) 就可以了。想要让文本按照圆形轨迹包围图片的话，就使用 shape-outsideL circle(50%)。basic-shape 语法支持的裁剪图形包括矩形、圆形、椭圆形和多边形。当然，手动定位包含多个点的多边形很痛苦，幸运的是，我们有一个更好的办法。
Shape Path 编辑器
Firefox 62 开始支持 Shape Path 编辑器，你可以以可视化的方式在 CSS 查看器中直接编辑形状。打开 Firefox，使用 Firefox Developer Tools 选择要编辑形状的元素，选中元素后，会发现在 shape-outside 和 clip-path 属性旁边会显示一个小小的 icon 图标，如果元素没有设置这两个属性的话，你也可以手动添加。接下来点击这个 icon 开始可视化编辑，你可以用鼠标 直接编辑 元素的形状。
打开控制台查看器，选择要编辑的元素：
点击 clip-path 或 shape-outside 旁边的 icon。
编辑裁剪路径：
编辑 outside-shape：
演示的 demo 页面 在这里。
更多的 CSS Shape 编辑器方面的内容可以查看 完整文档。
渐进增强
今天的大多数浏览器都支持 CSS shapes 了，在不支持的浏览器中我们也能平稳地退化。使用现在浏览器的用户可以得到良好的阅读体验，在不支持的浏览器中用户 也感觉不到有什么不对。
惊人的应用案例
下面列举了使用了 CSS Shapes 实现的几个惊人的应用案例：
via Mandy Michael
使用 clip-path 实现的植物和背景的效果：
via Aga Naplocha
还有一个结合 clip-path 和 shape-outside 属性达到的效果：
via Nicholas Evans
打破常规
今日能实现的对元素形状的控制得益于有 shape-outside 和 clip-path 两个属性。Firefox Shape Path 编辑器让编辑它们变得更加容易。
你的网站里有使用过这种打破常规的布局吗？
（完）
