CSS <basic-shape> Data Type

Description

The CSS <basic-shape> data type represents a shape used in the clip-path, shape-outside, and offset-path properties. It is a functional notation, meaning that it is defined using a function name followed by parentheses and zero or more arguments.

There are several basic shape functions, including:

  • circle()
  • ellipse()
  • polygon()
  • rect()

Each function has its own set of arguments, which are used to specify the size, position, and other properties of the shape.

For example, the following CSS code creates a circular clip path for an element:

element {
  clip-path: circle(50%);
}

This code will clip the element to a circular region with a radius of 50% of the element's width and height.

The <basic-shape> data type can also be used to create more complex shapes, such as polygons and stars. For example, the following CSS code creates a triangular clip path for an element:

element {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

This code will clip the element to a triangular region with vertices at the top-left corner, bottom-right corner, and midpoint of the element's bottom edge.

The <basic-shape> data type is a powerful tool for creating and manipulating shapes in CSS. It can be used to create a wide variety of effects, such as clipping images to custom shapes, creating masked elements, and creating complex layouts.

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 xI and yI - the x and y axis coordinates of the i-th vertex of the polygon.
    syntax: polygon() = polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )

Example

<div class="container">
<img src="images/sunset.jpg" alt="Sunset">
</div>
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%);
}

Browser Support

The following table will show you the current browser support for the CSS basic-shape data type.

Desktop
Edge Chrome Firefox Opera Safari
7937542410.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
37542410.3337

Last updated by CSSPortal on: 7th October 2023