在前面的教程中，看到了怎么创建CSS Shapes,即在元素定认一个规则图形。里面都是些基础的知识，比如说创建一个圆，然后多行文本围绕这个圆。在这篇文章中，我们将探索一些更复杂的图形，让你的布局不在局限于四四方方的图形中。
创建多边形
除了可以创建圆和矩形之外，还可以创建多边形，多边形一般有多个边(五个或五个以上)组成，比如五边形或六边形。在CSS中可以使用polygon()函数来创建，可以在里面传多个坐标值，每个坐标值之间用逗号隔开：
.shape {
float: left;
background-size: contain;
background-repeat: no-repeat;
margin: 30px;
width: 265px;
height: 265px;
shape-margin: 20px;
}
.pentagon {
background-image: url('../img/pentagon.svg');
shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}
上面的代码，我们添加了五个坐标点，从而生成了一个五边形。可以在这个基础上添加一个或更多个坐标点，从而可以生成六边形、七边形或八边形等。
手动创建一个多边形并不像创建圆或椭圆那么简单，特别是对于一个复杂的多边形的话，它会涉及到几十个坐标。不过值得庆幸的是，有一个工具，可以使你创建多边形变得更为直观。
使用CSS Shapes编辑器
CSS Shapes Editor是Chrome浏览器的一个扩展插件。一旦你安装成功了的话，在Chrome开发者工具条中会增加一个名叫Shapes的功能选项，可以直接通过个编辑器工具帮助你编辑一个复杂的多边形：
Shapes选项卡包含一个shape-outside属性，以及配置了一个+标志，表示可以添加CSS Shapes对应的函数。我们选择polygon()和页面上的元素，那么就可以在浏览器中绘制所需要的形状，就像是在一个图形编辑应用程序中操作一样。
当我们在绘制多边形时，浏览器扩展插件将会自动更新polygon()函数的坐标值，同时它将作为内联样式添加到元素中。一旦完成，你只需要将生成的代码复制并粘贴到你的样式表中。
使用同样的技术，我们可以很容易的绘制任何形状并且应用到我们的网页上，例如：
提取图像形状
我们可以给shape-outside属性传一个url()函数。使用这个功能可以给其添加一个背景图像。在这个示例中，允许通过url()给shape-outside属性定义一个元素形状是基于图像的。
当你有一个特别复杂的形状，或者有很多曲线和点，你想让你的内容可以更好的围绕这个图形，这个时候，可以使用url()来替代polygon()。或者说，你定认形状非常棘手时，也可以考虑这样的方式。
如下面的示例所示，首先，你需要创建一个带有透明度的图像：
把最初的鹦鹉图像当作的容器的背景图，添加到容器上：
.container {
background-repeat: no-repeat;
background-image: url('../img/parrot.png');
}
透明度的阈值
形状本身将添加到容器内的另一个元素上，这一次我们使用了另一个CSS属性shape-image-threshold。
.shape {
shape-margin: 15px;
shape-outside: url('../img/parrot-shape.png');
shape-image-threshold: 0;
}
这处属性定义了图像形状最低透明度的阈值，它可以是一个0到1之间的数字。所以，如果你想让你的图像具有一定的透明度，可以将其设置为0.8或0.5。如果设置其值为0，那么鹦鹉图像周边区域完全是透明的。
最后的效果看起来像这样：
提供降级处理
浏览器支持CSS Shapes还不是全面的，别指望在Firefox、IE或Edge中能看到效果。同时 Stephen在前面的教程中，也还有几个方案可提供降级处理：
This is cool, but genuine question: what is the fallback for IE/FF? It seems like going all-in with a shape layout would end up in some weird places for a lot of users.” – Stephen Bateman
首先，可以选择Modernizr库。Modernizr是一个非常可靠的库，用来对浏览器特性的测试。确保在具有CSS Shapes特性的元素上添加CSS类名。然后可以在不支持CSS Shapes中指定相关的样式：
/**
* When the browser does not support "CSS Shape".
*/
.no-shapes .shape {
shape-outside: polygon();
}
/**
* Styles when the browser supports "CSS Shape".
*/
.shapes .shape {
}
如果你觉得加载Modernizr太重，你可以通过下面这行JavaScript代码，帮助你测试浏览器是否启用了CSS：
if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) {
document.body.classList.add('no-css-shape');
}
每个CSS的样式都可以通过JavaScript给其动态插入相同的样式效果。上面这段代码检测浏览器是否有shapteOutside方法，如果没有，那么给元素添加一个no-css-shapge类名，通过这个类名做降级处理。
.shape {
shape-outside: polygon();
}
.no-shapes .shape {
}
另外还可以使用CSS的@support语法来做相应的属性检测，比如：
@supports (shape-outside: circle()) {
.shape {
shape-outside: circle();
}
}
在项目中具体采用哪种方案来做降级处理，这得取决于你的项目，你可以选择更适合你项目的一种方案。
小结
在这篇文章中，发现了如何使用polygon()函数来绘制复杂的多边形以及如何使用Chrome的扩展插件更容易的绘制多边形。还学会了如何利用url()函数引用图像，将图像当作一个图形形状，这种方式对于复杂形状特别有用。最后，尽管CSS Shapes目前支持的浏览器甚少，但我们也在文章中讨论了几种优雅降级的处理方案。具体选择什么样的方案，应该根据自身的项目需求来决定。
案例
扩展阅读
- CSS Shapes中文教程
- How to Use CSS Shapes in Your Web Design
- A Quick Look at Modernizr 3.0
- Quick Tip: Add a @supports CSS File to Your CodePen Demos
- CSS3 @supports中文教程
本文根据@Louie Rootfield的《Taking CSS Shapes to the Next Level》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://webdesign.tutsplus.com/tutorials/taking-css-shapes-to-the-next-level--cms-27907。
大漠
如需转载，烦请注明出处：http://www.w3cplus.com/css3/taking-css-shapes-to-the-next-level.html