clip-path
Description
The clip-path property for CSS specifies a basic shape or references a
Syntax
CSS
clip-path: value;
JS
object.style.clipPath = "value";
Values
<'clip-path'> = <clip-source> | [ <basic-shape> || <geometry-box> ] | none
<clip-source> = <url>
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<basic-shape> = inset() | circle() | ellipse() | polygon() | path()
inset() = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
An inset rectangle.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<'border-radius'> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
circle() = circle( <shape-radius>? [ at <position> ]? )
A circle.
<shape-radius> = <length-percentage> | closest-side | farthest-side
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
closest-side
Uses the length from the center of the shape to the closest side of the reference box.
farthest-side
Uses the length from the center of the shape to the farthest side of the reference box.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
ellipse() = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
An ellipse.
<shape-radius> = <length-percentage> | closest-side | farthest-side
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
closest-side
Uses the length from the center of the shape to the closest side of the reference box.
farthest-side
Uses the length from the center of the shape to the farthest side of the reference box.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
polygon() = polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )
A polygon.
<'fill-rule'> = nonzero | evenodd
nonzero
Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray.
evenodd
Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
path() = path( [<'fill-rule'>,]? <string> )
A path.
<'fill-rule'> = nonzero | evenodd
nonzero
Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray.
evenodd
Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
<shape-box> = <box> | margin-box
<box> = border-box | padding-box | content-box
border-box
Area within the border box.
padding-box
Area within the padding box.
content-box
Area within the content box.
margin-box
Area within the margin box.
fill-box
Uses the object bounding box as a reference box.
stroke-box
Uses the stroke bounding box as a reference box.
view-box
Uses the nearest SVG viewport as a reference box.
none
No clipping path is created.
Initial
none