CSS <basic-shape> Data Type

Description

The <basic-shape> CSS data type can be specified using basic shape functions. When using this data type to define shapes, the reference box is defined by each property that uses <basic-shape> values.
The <basic-shape> data type is generally used with the clip-path, shape-outside, and offset-path properties.

Syntax

refer to values below for each syntax

Values

inset()Defines an inset rectangle. When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
syntax: inset() = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
circle()The shape-radius argument represents r, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as sqrt(width2+height2)/sqrt(2). The position argument defines the center of the circle. This defaults to center if omitted.
syntax: circle() = circle( <shape-radius>? [ at <position> ]? )
ellipse()The shape-radius arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. The position argument defines the center of the ellipse. This defaults to center if omitted.
syntax: ellipse() = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
polygon()<'fill-rule'> - The filling rule used to determine the interior of the polygon. Possible values are nonzero or evenodd. Default value when omitted is nonzero. Each pair argument in the list represents x_I and y_I - the x and y axis coordinates of the i-th vertex of the polygon.
syntax: polygon() = polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )

Example

HTML

<div class="container">

  <img src="images/sunset.jpg" alt="Sunset">

</div>

CSS

img {
   -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Result