-
前言
利用CSS生成复杂图形的技术将得到广泛的支持和应用，本文的目的是为大家打开一个冰山，希望本文能对不规则图形有一个初步的了解。
现在，我们已经可以使用CSS 3常见的不规则图形，如下图所示：
用CSS创建的图形无法生成文本或实现文本包围效果，如何实现不规则图形和字符的复杂布局成为一个热门话题。
今天我们将介绍如何实现这个效果。在这篇文章中，我们将解释如何使用CSS创建不规则的图形来实现不规则的文本布局。以下是这项技术创造的爱丽丝梦游仙境的照片。
注意：这是CSS的最新技术，因此它需要更高版本的浏览器版本。如果你需要看一个在线例子，你需要确保浏览器支持这个CSS技术。
声明的图形
我们需要使用外部属性来声明不规则的图形。目前，形状外部属性只能应用于浮动元素，只能应用于块级元素。如果需要在非块元素上使用这些属性，必须首先将元素声明为块级。
对于形状*值有三种分配方式：自动的、基本的图形或图片链接。如果设置为自动化，浮动元素将继续作为传统的盒子模型呈现。如果您不熟悉Box模型，请参考CSS框模型，这是阅读本文的基础。
绘图的方法包括：矩形、圆、椭圆或插入矩形，聚。你可以通过链接查看详细描述。
如果属性设置为图片链接，则浏览器将根据图片的图（alpha通道）绘制图形的形状。
在元素上创建坐标系统
在声明CSS图形之后，我们首先需要创建一个坐标系统，用于绘制图形。
坐标系统是非常必要的，因为图形需要根据坐标系的网格来绘制，形状-属性是基于盒子模型的。为了使它开始，我们需要指定指定框的大小，限制框中的不规则图形，它也将用于创建绘图坐标系。坐标系统的起始点在形状框的左上角。如果没有清晰的宽和高的声明，形状*属性就不能工作。
设置自定义图形的背景颜色
应用自定义图形，其框模型仍然存在，其他传统样式设置将在框模型范围内工作，
我们只是想创建一个浮动的圆圈，并设置这个圆形背景颜色。按照正常的思维方式，效果应该是这样的：
但是当设置框的背景颜色时，您会发现所期望的效果是不同的，其效果如下：
在上面的图片中，我们看到背景颜色应用于框模型范围，而不是我们期望的圆内。
那么，我们该如何设置圆形背景色呢这导致了一个新的CSS样式：clip-path.clip-path是用来限制电流的风格范围。在下面的例子中，你将看到它是如何使用的。
提醒
现在，外部属性只作为一个域浮动元件的形状，并限制在块的应用水平的元素。用元素定义这些属性，文本将取决于图形形状的布局。未来的CSS形状不仅会限制适用于浮动的元素，我们不仅能够在文字图形做文章，但可以定义自定义的图形内部。
实例——使用外部形状在自定义形状周围创建浮动文本
让我们从一个简单的例子开始。在实例中，我们将创建一个内置文本流的自定义图形，最后的结果如下（本文的结尾提供了一个实例下载链接）：
在这个例子中，我们有两个容器来设置定制的形状和嵌套的文本内容：
CSS代码将内容复制到剪贴板。
拉图尔艾菲尔
乱数假文...
首先，我们需要在浮动区域声明div节点并使用固定值来设置大小：
CSS代码将内容复制到剪贴板。
集装箱{。
溢出：隐藏；
身高：100vh；
宽度：100vw；
}
形。{
浮点数：左；
身高：100vh；
宽度：40vw；
浮：错误；
背景：黑色的URL（；
背景尺寸：封面；
}
现在坐标系统已经成功创建，然后我们将绘制图形。图形可以用两种方式绘制：
采用聚（）
我们可以使用聚（）计算图的范围的方法。这种方法得到多个点的坐标系中绘制图形，每个点的值（x，y）处。在这个例子中，我们将创建一个非常简单的多边形，如下图所示：
坐标点的单位可以是固定值，也可以是百分数。在这个例子中，我们以百分比形式设置点阵位置。然后我们需要将这个样式应用到浮动元素中。
CSS代码将内容复制到剪贴板。
形。{
/ / * * hellip；
形外：聚（00, 100 % 0, 100 % 100%，30%，100%）；
形状：20px保证金；
}
应用上述风格后，产生了一个不规则的梯形图。
您可以看到，代码中使用了形状边距属性，用于在图形和文本内容之间设置边距。
接下来，您需要添加一个背景图，并注意到在添加背景地图之后，它将被应用到框模型中，到目前为止，结果如下：
因此，为了达到预期的效果，我们需要设置剪辑路径属性，并将其范围设置为与外部属性的形状相同。
CSS代码将内容复制到剪贴板。
形。{
/ / * * hellip；
剪辑路径：聚（00, 100 % 0, 100 % 100%，30%，100%）；
}
现在，我们已经通过使用聚（）方法实现目标的影响。
利用图片的链接
我们也可以通过图片（不清楚区域的图片）创建不规则图像，并根据图片的alpha通道生成不规则图像。
例如，取代的聚（）声明的方法。我们可以设置形状以外的图片URI属性值，和浏览器将自动绘制不规则图形根据图片。
图片的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则：
CSS代码将内容复制到剪贴板。
形。{
/ / * * hellip；
外部形状：URL；
形状图像阈值：0.5；此属性用于设置浮动区域透明度的范围。
}
上述两种方法各有优缺点，如图形过于复杂，用图形方法绘制节点比手工图形更方便。