polygon() CSS Function

Description

The polygon() CSS function is a basic shape value that is part of the CSS Shapes module.

Syntax

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

Values

• <fill-rule>Specifies a fill-rule to use to determine the interior of the polygon. Can be either nonzero or evenodd. The default value is nonzero.
• <shape-arg>This can be specified in either of the following ways:
  • <length> - Specifies a <length> value to use (e.g. px, em, vw, etc) for the radius.
  • <percentage> - Specifies a <percentage> value to use. The percentage value uses the width and height of the reference box.

Example

<div class="polygon"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

.polygon { 

  float: left;

  background: red;

  width: 150px;

  height: 150px;

  shape-outside: polygon(0px 0px, 200px 100px, 0px 200px);

}

Browser Support

Desktop
X	X	37	54	24	10.1
Tablets / Mobile
37	37	54	24	10.3	4.0

Last updated by CSSPortal on: 1st December 2019