CSS 函数 Polygon() 是 <basic-shape> 数据类型之一，用于创建多边形。
它需要指定一对或多对坐标，每对代表一个顶点形状的。
属性值
<fill-rule>（可选）- 可选值，非零（如果省略则默认）或evenodd可用于指定填充规则。
<length-percentage> - 多边形的每个顶点由一对指定顶点坐标的<lenght-percentage>值表示相对于形状的参考框。
语法
polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<shape-arg> = <length> | <percentage> 它返回 <basic-shape> 值。
CSS Polygon( ): 带尺寸
下面的示例演示了使用 shape-outside 属性的 Polygon() 的工作原理。
由特定坐标形成的多边形形状决定了文本在多边形周围的环绕位置shape.
<html>
<head>
<style>
#polygon-demo {
float: left;
width: 250px;
height: 150px;
shape-outside: polygon(100px 20px, 200px 10px, 100px 250px);
}
</style>
</head>
<body>
<div id="polygon-demo"></div>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
</body>
</html> CSS gony(): 使用clip-path
在下面的示例中，在容器内，shape-outside 和clip-path 属性用于勾勒出确定文本形状的多边形轮廓。
<html>
<head>
<style>
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
text-align: justify;
color: blue;
shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<div class="container">
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
</div>
</body>
</html>