CSS3绘制不规则图形的⼀些⽅法⽰例
前⾔
CSS 创建复杂图形的技术即将会被⼴泛⽀持，并且应⽤到实际项⽬中。本篇⽂章的⽬的是为⼤家开启它的冰⼭⼀⾓。我希望这篇⽂章能让你对不规则图形有⼀个初步的了解。
现在，我们已经可以使⽤CSS 3 常见不规则复杂图形了，如下图所⽰：
使⽤CSS创建的图形，⽆法内置⽂字或实现⽂字环绕效果。因此，如何实现不规则图形和⽂字复杂布局也成为了⼀个热议话题。
今天我们就来介绍⼀下如何实现这个效果。⽂章中我们将阐述如何使⽤ CSS创建不规则图形，实现不规则的⽂本布局。学会如何创建不规则图形之后，你就可以发挥想象⼒，创建唯美的CSS页⾯了，下图既是使⽤该技术创建的《爱丽丝梦游仙境》效果图：
注：这是CSS的最新技术，所以对浏览器版本要求较⾼。如果需要查看在线⽰例你需要确保浏览器⽀持这个CSS技术。在本⽂中我也将提供⼀些效果截图查看效果。
声明图形
我们需要使⽤shape-outside 属性声明不规则图形。当前， shape-outside 属性只能被应⽤于浮动元素，并且只能应⽤于块级元素。如果需要在⾮块级元素上使⽤这些属性，必须先把元素声明为块级。
Shape-* 值有三种赋值⽅式: ⾃动，基本图形或者图⽚链接。如果被设置为⾃动，浮动元素将继续作为传统的盒模型进⾏渲染。如果你还不熟悉盒模型，请参考CSS盒模型，这是阅读本篇⽂章的基础。
绘制⽅法包括：rectangle、inset-rectangle、circle、ellipse或polygon⽅法等。你可以通过链接查看详细的描述。
如果属性被设置为图⽚链接，浏览器会按照图⽚的“alpha通道”来绘制图形形状。
在元素上创建坐标系
声明了CSS 图形之后，我们⾸先需要创建将⽤于绘制图形的坐标系。
坐标系是⾮常必要的，因为图形需要依据此坐标系上的点阵进⾏绘制。shape-* 属性是基于盒模型的，为了使它启作⽤，需要明确指定盒⼦的⼤⼩，限制不规则图形在盒⼦范围内，它也将被⽤于创建绘制坐标系，坐标系的起点位于形盒⼦左上⾓。如果没有明确宽和⾼声明， shape-* 属性将不启作⽤。
设置⾃定义图形的背景⾊
应⽤了⾃定义图形，它的盒模型仍然存在，其它传统的样式设置将作⽤于盒模型范围。例如，下⾯这个例⼦中，
我们仅仅想创建⼀个浮动圆形，并设置这个圆形的背景⾊。按照正常的思路理解，效果应该是这样的：
但是当设置了盒⼦的背景⾊后，你会发现和预期的效果不同，效果如下：
在上图中我们看到背景⾊被应⽤到盒模型范围，⽽不是我们预想的圆形内。
那么，我们应该怎样设置圆形的背景⾊呢？这就引出了⼀个新的CSS样式： clip-path 。clip-path ⽤于限制当前样式的作⽤范围。在下⾯的例⼦中你将看到它的使⽤⽅法。
提醒
现在，shape-outside 属性只作⽤域浮动的元素，并且仅限制于在块级元素上应⽤。使⽤这些属性定义的元素，其周围的⽂本将依赖于图形形状排布。未来的CSS 形状将不仅仅限制与应⽤于浮动元素上，我们将不仅仅可以在⽂本外部的图形上做⽂章，完全可以在其内部定义⾃定义图形，实现如下效果：
实例-使⽤shape-outside 创建环绕于⾃定义形状的浮动⽂本
我们从⼀个简单的例⼦开始。在实例中我们将创建⼀个⾃定义图形，并且内置⽂本流，最终效果图如下（⽂章末尾提供实例下
载链接）：
例⼦中我们拥有两个容器，⽤于设置⾃定义形状和嵌套⽂本内容。代码如下：
CSS Code复制内容到剪贴板
1. <div class="container">
2. <div class="shaped"></div>
3.
css特效文字
4. <div class="content">
5.
6. <h1><span>La</span> Tour <br/>Eiffel</h1>
7.
8. <p></p>
9.
10. </div>
11.
12. </div>
⾸先我们需要声明浮动区域的DIV节点，并且使⽤固定值设置⼤⼩。代码如下：
CSS Code复制内容到剪贴板
1. .container{
2. overflow:hidden;
3.
4. height: 100vh;
5.
6. width: 100vw;
7.
8. }
9.
10. .shaped{
11.
12. float:left;
13.
14. height:100vh;
15.
16. width:40vw;
17.
18. float:rightright;
19.
20. background: black url（../images/eiffel.jpg） center top no-repeat;
21.
22. background-size:cover;
23.
24. }
现在坐标系已经创建成功，接下来我们将要绘制图形了。可以通过两种⽅式来绘制图形：
使⽤polygon（）
我们可以使⽤polygon() ⽅法来计算图形范围。这个⽅法从坐标系中获取多个点⽤于绘制图形，每个点由(x, y)值定位。例⼦中我们将要创建⼀个⾮常简单的多边形，如下图所⽰：
坐标点的单位可以是固定值，或者百分⽐。在这个例⼦中我们将以百分⽐的形式设置点阵位置。接下来我们需要应⽤这个样式在浮动元素上。
CSS Code复制内容到剪贴板
1. .shaped{
2. /*…*/
3.
4. shape-outside: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
5.
6. shape-margin: 20px;
7.
8. }
应⽤以上的样式后，⼀个不规则的图形-梯形产⽣了。
可以看到代码中使⽤了shape-margin 属性，它⽤于设置图形和⽂本内容之间的边距。
接下来需要添加背景图，需要注意在添加背景图之后，它将被应⽤于盒模型，⽬前为⽌效果如下：
所以，为了达到预期效果，我们需要设置clip-path 属性，并且设置其范围和shape-outside 属性相同。
CSS Code复制内容到剪贴板
1. .shaped{
2. /*…*/
3.
4. clip-path: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
5.
6. }
现在，我们就通过polygon() ⽅法实现了⽬标效果。
使⽤图⽚链接
我们也可以通过图⽚（严格说是拥有通明区域的图⽚）来创建不规则图形，依据图⽚的“alpha通道” ⽣成不规则图形。
例如，替代polygon() 声明⽅法。我们可以设置shape-outside 属性值为图⽚URI，浏览器就会⾃动依据图⽚来绘制不规则图形。
图⽚中的透明部分将被声明为⽂本元素的浮动部分。其余部分被声明为不规则图形。代码如下：
CSS Code复制内容到剪贴板
1. .shaped{
2. /*…*/
3.
4. shape-outside: url（/images/mm.png）;
5.
6. shape-image-threshold: 0.5；这个属性⽤于设置浮动区域透明度范围
7.
8. }
上述的两种⽅法都拥有各⾃的优缺点。例如，如果图形过于复杂，通过图⽚⽅法⽐⼿动计算图形绘制节点更⽅便。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。