<basic-shape>
CSS
data type
represents a shape used in the
clip-path
,
shape-outside
，和
offset-path
特性。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<basic-shape>
data type is defined with one of the basic shape functions listed below.
When creating a shape, the reference box is defined by each property that uses
<basic-shape>
values. The coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.
The following shapes are supported. All
<basic-shape>
values use functional notation and are defined here using the
value definition syntax
.
inset()
inset( <shape-arg>{1,4} [round <border-radius>]? )
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.
可选
<border-radius>
argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.
A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area.
circle()
circle( [<shape-radius>]? [at <position>]? )
<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(width^2+height^2)/sqrt(2)
.
<position>
argument defines the center of the circle. This defaults to center if omitted.
ellipse()
ellipse( [<shape-radius>{2}]? [at <position>]? )
<shape-radius>
arguments represent r
x
and r
y
, 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 r
x
value) and the used height (for the r
y
value) of the reference box.
The position argument defines the center of the ellipse. This defaults to center if omitted.
polygon()
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<fill-rule>
represents the
filling rule
used to determine the interior of the polygon. Possible values are
nonzero
and
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.
path()
path( [<fill-rule>,]? <string>)
可选
<fill-rule>
represents the
filling rule
used to determine the interior of the path. Possible values are
nonzero
and
evenodd
. Default value when omitted is
nonzero
.
The required <string> is an SVG Path string encompassed in quotes
The arguments not defined above are defined as follows:
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
Defines a radius for a circle or ellipse. If omitted it defaults to
closest-side
.
closest-side
uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.
farthest-side
uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.
The values in a
<basic-shape>
function are computed as specified, with these exceptions:
<position>
value in
circle()
or
ellipse()
is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
<border-radius>
value in
inset()
is computed as an expanded list of all eight
<length>
or percentage values.
When animating between one
<basic-shape>
and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as
<length>
,
<percentage>
，或
calc()
where possible. If list values are not one of those types but are identical, those values do interpolate.
ellipse()
or
circle()
, and none of the radii use the
closest-side
or
farthest-side
keywords, interpolate between each value in the shape functions.
inset()
, interpolate between each value in the shape functions.
polygon()
, both polygons have the same number of vertices, and use the same
<fill-rule>
, interpolate between each value in the shape functions.
path()
, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.
In this example, we use the @keyframes at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.
<div></div>
div {
width: 300px;
height: 300px;
background: repeating-linear-gradient(red, orange 50px);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
animation: 4s poly infinite alternate ease-in-out;
margin: 10px auto;
}
@keyframes poly {
from {
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
to {
clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Shapes Module Level 1
The definition of '<basic-shape>' in that specification. |
候选推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<basic-shape>
|
Chrome 完整支持 37 | Edge 完整支持 79 | Firefox 完整支持 54 | IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 37 | Firefox Android 完整支持 54 | Opera Android 完整支持 24 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 3.0 |
| Animation | Chrome 完整支持 37 | Edge 完整支持 79 | Firefox 完整支持 54 | IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 37 | Firefox Android 完整支持 54 | Opera Android 完整支持 24 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 3.0 |
circle()
|
Chrome 完整支持 37 | Edge 完整支持 79 | Firefox 完整支持 54 | IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 37 | Firefox Android 完整支持 54 | Opera Android 完整支持 24 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 3.0 |
inset()
|
Chrome 完整支持 37 | Edge 完整支持 79 | Firefox 完整支持 54 | IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 37 | Firefox Android 完整支持 54 | Opera Android 完整支持 24 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 3.0 |
path()
|
Chrome
部分支持
46
注意事项
|
Edge
部分支持
79
注意事项
|
Firefox
部分支持
63
注意事项
Disabled
|
IE 不支持 No |
Opera
部分支持
33
注意事项
|
Safari 不支持 No |
WebView Android
部分支持
46
注意事项
|
Chrome Android
部分支持
46
注意事项
|
Firefox Android
部分支持
63
注意事项
Disabled
|
Opera Android
部分支持
33
注意事项
|
Safari iOS 不支持 No |
Samsung Internet Android
部分支持
5.0
注意事项
|
polygon()
|
Chrome 完整支持 37 | Edge 完整支持 79 | Firefox 完整支持 54 | IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 37 | Firefox Android 完整支持 54 | Opera Android 完整支持 24 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 3.0 |
完整支持
部分支持
不支持
见实现注意事项。
用户必须明确启用此特征。
<angle-percentage>
<angle>
<basic-shape>
<blend-mode>
<custom-ident>
<dimension>
<frequency-percentage>
<frequency>
<gradient>
<image>
<integer>
<length-percentage>
<length>
<number>
<percentage>
<ratio>
<resolution>
<shape>
<string>
<time-percentage>
<time>
<transform-function>
<url>
color
flex
ident
position
shape-image-threshold
shape-margin
shape-outside