CSS 函数 - polygon（）

CSS 函数 polygon（） 是 <basic-shape> 数据类型之一，用于创建多边形。

它需要指定一对或多对坐标，每对坐标代表形状的一个顶点。

可能的值

<fill-rule> （可选） - 可选值为非零（如果省略，则为默认值）或 evenodd，可用于指定填充规则。
<length-percentage> - 多边形的每个顶点都由一对<length-percentage>值表示，这些值指定顶点相对于形状参考框的坐标。

语法


polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<shape-arg> = <length> | <percentage>

它返回一个 <basic-shape> 值。

CSS polygon（） - 带尺寸

以下示例演示了使用 shape-outside 属性处理 polygon（） 的工作方式。

多边形形状由特定坐标形成，用于确定文本围绕多边形形状的位置。


<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, elit elit bibendum elit, vel bibendum elit elit elit. Sed euismod, velit vel bibendum bibendum, elit elit bibendum elit, vel bibendum elit elit elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien.</p>
</body>
</html>

CSS polygon（） - 使用 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien.</p>
	 	 	 <p>Ut euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien.</p>
	 	 	 <p>Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien.</p>
	 	 	 <p>Phasellus euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien.</p>
	 	 	 <p>Nullam euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien.</p>
	 	</div>
</body>
</html>

本页