CSS Function - polygon()

The CSS function polygon() is one of the <basic-shape> data types and is used to create a polygon.

It requires the specification of one or more pairs of coordinates, each pair representing a vertex of the shape.

Possible values

  • <fill-rule> (optional) - An optional value that is either nonzero (default if omitted) or evenodd can be used to specify the fill rule.

  • <length-percentage> - Each vertex of the polygon is denoted by a pair of <lenght-percentage> values specifying the coordinates of the vertex with respect to the shape's reference box.

Syntax

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

It returns a <basic-shape> value.

CSS polygon() - With Dimensions

The following example demonstrates working of polygon() with shape-outside property.

The polygonal shape, formed by specific coordinates, determines where the text wraps around the polygonal 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>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() - Using clip-path

In the following example the shape-outside and clip-path properties are utilized to outline the polygon that determines how text is arranged within a container.

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