css3 不规则形-使用 CSS 3 创建不规则形状

我们需要使用 shape-outside 属性来声明不规则形状。 目前，shape-outside属性只能应用于浮动元素，并且只能应用于块级元素。 如果需要在非块级元素上使用此属性，则必须首先将该元素声明为块级。

shape-*值有三种形式参数形式：自动、基本形状或图像链接。 如果设置为手动，浮动元素将继续呈现为传统的盒子模型。 如果您对盒模型不熟悉，请参考CSS盒模型，它是阅读本文的基础。

绘制方法包括：矩形、内嵌矩形、圆形、椭圆形或多边形技术等。您可以点击链接查看详尽的描述。

如果该属性设置为图像链接，浏览器将根据图像的“alpha 通道”绘制图形形状。

在元素上创建坐标系

声明 CSS 图形后，我们首先需要创建用于绘制图形的坐标系。

坐标系是非常必要的，因为图形需要根据这个坐标系上的点阵来绘制。 shape-* 属性基于盒模型。 为了使其发挥作用，需要明确指定袋子的尺寸，并且不规则形状被限制在袋子内。 它还将用于创建草图坐标系。 坐标系的起点位于形状包的左上角。 如果没有明确的宽度和高度声明，shape-* 属性将不起作用。

设置自定义图形的背景颜色

应用自定义图形后，其盒模型仍然存在，并且其他传统样式设置将应用于盒模型范围。 例如，在以下情况下，

我们只想创建一个浮动矩形并设置该矩形的背景颜色。 按照正常的思路，效果应该是这样的：

但是当你设置包的背景颜色时，你会发现疗效与预期的效果不同，效果如下：

在上图中，我们看到背景颜色应用于框的边界css3 不规则形，而不是我们想象的正方形。

那么，我们应该如何设置方块的背景颜色呢？ 这导致了一种新的 CSS 样式：clip-path。 Clip-path 用于限制当前样式的范围。 您将在下面的反例中看到它是如何使用的。

提醒

shape-outside 属性现在仅适用于浮动元素，并且仅限于块级元素。 使用此属性定义的元素的周围文本将取决于图形形状的布局。 未来的CSS形状将不仅仅局限于和应用于浮动元素，我们不仅可以在文本之外的图形上做文章，还可以在其内部定义自定义图形，以达到以下效果：

示例 - 使用 shape-outside 创建环绕自定义形状的浮动文本

我们从一个简单的反例开始。 在示例中，我们将使用外部文本流创建自定义图形。 最终效果图如下（文末提供示例下载链接）：

在示例中，我们有两个用于自定义形状和嵌套文本内容的容器。 代码如下所示：

3创建不规则图形"/>

<div class="container">
  <div class="shaped"></div>
  <div class="content">
    <h1><span>La</span> Tour <br/>Eiffel</h1> <p>Lorem Ipsum.....</p> </div> </div>

3创建不规则图形"/>

首先我们需要声明浮动区域的DIV节点，并设置固定值的大小。 代码如下所示：

3创建不规则图形"/>

.container{
  overflow:hidden;
  height: 100vh;
  width: 100vw;
}
.shaped{
  float:left;
  height:100vh;
  width:40vw;
  float:right;
  background: black url（../images/eiffel.jpg） center top no-repeat;
  background-size:cover;
}

3创建不规则图形"/>

现在坐标系已经创建成功了，接下来我们就要绘制图形了。 图形可以通过两种方式绘制：

使用多边形()

我们可以使用 Polygon() 方法来估计图形的范围。 该方法从坐标系中获取多个点来绘制图形，每个点通过(x,y)值来定位。 在示例中我们将创建一个非常简单的六边形，如下图所示：

坐标点的单位可以是固定值，也可以是比例。 在此示例中，我们将以比率设置点位置。 接下来我们需要将此样式应用于浮动元素。

3创建不规则图形"/>

.shaped{
  shape-outside: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
  shape-margin: 20px;
}

3创建不规则图形"/>

应用上述图案后，就形成了一个不规则的形状——梯形。

可以看到代码中使用了shape-margin属性，该属性用于设置图形与文本内容之间的行间距。

接下来，您需要添加背景图像。 需要注意的是，添加背景图片后，将会应用到盒模型中。 到目前为止，效果如下：

因此，为了达到我们想要的效果，我们需要设置clip-path属性，并将其范围设置为与shape-outside属性相同。

3创建不规则图形"/>

.shaped{
  clip-path: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
}

3创建不规则图形"/>

现在，我们通过polygon()方法就达到了目标效果。

使用图像链接

我们还可以通过图片（严格来说是有透明区域的图片）创建不规则图形，根据图片的“alpha通道”生成不规则图形。

例如css3 不规则形，代替 Polygon() 声明。 我们可以将shape-outside属性的值设置为图像URI，浏览器将根据图像手动绘制不规则形状。

图像的透明部分将被声明为文本元素的浮动部分。 其余的被声明为不规则形状。 代码如下所示：

3创建不规则图形"/>

.shaped{
  shape-outside: url（/images/mm.png）;
  shape-image-threshold: 0.5;这个属性用于设置浮动区域透明度范围
}

3创建不规则图形"/>

上述两种方法都有各自的优点和缺点。 例如，如果图形太复杂，使用图片比自动估计图形轮廓节点更方便。

源码下载