我们可以使用polygon() 方法来计算图形范围。这个方法从坐标系中获取多个点用于绘制图形，每个点由(x, y)值定位。 例子中我们将要创建一个非常简单的多边形，如下图所示：
坐标点的单位可以是固定值，或者百分比。在这个例子中我们将以百分比的形式设置点阵位置。接下来我们需要应用这个样式在浮动元素上。
CSS Code复制内容到剪贴板
.shaped{
/*…*/
shape-outside: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
shape-margin: 20px;
}
应用以上的样式后，一个不规则的图形-梯形产生了。
可以看到代码中使用了shape-margin 属性，它用于设置图形和文本内容之间的边距。
接下来需要添加背景图，需要注意在添加背景图之后，它将被应用于盒模型，目前为止效果如下：
所以，为了达到预期效果，我们需要设置clip-path 属性，并且设置其范围和shape-outside 属性相同。
CSS Code复制内容到剪贴板
.shaped{
/*…*/
clip-path: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
}
现在，我们就通过polygon() 方法实现了目标效果。
使用图片链接
我们也可以通过图片（严格说是拥有通明区域的图片）来创建不规则图形，依据图片的“alpha通道” 生成不规则图形。
例如，替代polygon() 声明方法。我们可以设置shape-outside 属性值为图片URI，浏览器就会自动依据图片来绘制不规则图形。
图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。代码如下：
CSS Code复制内容到剪贴板
.shaped{
/*…*/
shape-outside: url（/images/mm.png）;
shape-image-threshold: 0.5;这个属性用于设置浮动区域透明度范围
}
上述的两种方法都拥有各自的优缺点。例如，如果图形过于复杂，通过图片方法比手动计算图形绘制节点更方便。
