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() - 带尺寸

以下示例演示了polygon() 与shape-outside 属性一起工作的情况。

由特定坐标形成的多边形形状决定文本围绕多边形形状的环绕方式。

<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>

打印页面