<basic-shape>

This translation is incomplete. Please help translate this article from English

<basic-shape> CSS 자료형clip-path, shape-outside, offset-path 속성이 사용할 형태를 정의합니다.

구문

<basic-shape> 자료형은 아래의 기본 형태 함수 중 하나를 사용해 정의합니다.

형태를 생성할 때, 형태의 기준 상자는 <basic-shape> 값을 사용하는 속성이 결정합니다. 형태의 좌표계는 기준 상자의 좌상단을 원점으로 하고, X축은 오른쪽, Y축은 아래쪽으로 나가게 됩니다. 백분율료 표현한 모든 길이는 기준 상자의 크기를 사용해 계산합니다.

형태 함수

다음의 형태를 지원합니다. 모든 <basic-shape> 값은 함수형 표기법을 사용하고, 여기서는 값 정의 구문을 통해 정의합니다.

inset()
inset( <shape-arg>{1,4} [round <border-radius>]? )

인셋(inset) 사각형을 정의합니다.

매개변수 네 개를 모두 제공했을 땐 기준 상자의 상, 우, 하, 좌측 모서리에서 각각의 값만큼 안쪽으로 이동하여 인셋 사각형의 모서리를 구성합니다. 매개변수는 여백 단축 속성의 구분을 따르므로 네 모서리를 한 개, 두 개 등의 값만으로 정의할 수 있습니다.

선택적 <border-radius> 매개변수를 border-radius 단축 속성 구문을 사용해 지정하면 인셋 사각형의 모서리를 둥글게 만들 수 있습니다.

좌우 인셋 각각 75%처럼, 한 축의 인셋 쌍 값의 합이 요소가 차지하는 크기보다 큰 경우 면적 없는 형태를 정의합니다.

circle()
circle( [<shape-radius>]? [at <position>]? )

<shape-radius> 매개변수는 원의 반지름 r을 지정합니다. 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비와 높이를 공식 sqrt(width^2+height^2)/sqrt(2)에 대입한 결과가 최종 값이 됩니다.

<position> 매개변수는 원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.

ellipse()
ellipse( [<shape-radius>{2}]? [at <position>]? )

<shape-radius> 매개변수는 타원의 X축, Y축 반지름인 rx와 ry를 순서대로 지정합니다. 두 값 모두 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비(rx)와 높이(ry)를 사용해 계산합니다.

<position> 매개변수는 타원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.

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 xi and yi - the x and y axis coordinates of the ith vertex of the polygon.

path()
path( [<fill-rule>,]? <string>)

The optional <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:

  • Omitted values are included and compute to their defaults.
  • A <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.
  • A <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>, or calc() where possible. If list values are not one of those types but are identical, those values do interpolate.

  • Both shapes must use the same reference box.
  • If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.
  • If both shapes are of type inset(), interpolate between each value in the shape functions.
  • If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions.
  • If both shapes are of type 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 all other cases no interpolation occurs.

예제

Animated polygon

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.

HTML

<div></div>

CSS

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%);
  }
}

결과

명세

Specification Status Comment
CSS Shapes Module Level 1
The definition of '<basic-shape>' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<basic-shape>Chrome Full support 37Edge No support NoFirefox Full support 54IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Firefox Android Full support 54Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 3.0
AnimationChrome Full support 37Edge No support NoFirefox Full support 54IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Firefox Android Full support 54Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 3.0
circle()Chrome Full support 37Edge No support NoFirefox Full support 54IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Firefox Android Full support 54Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 3.0
inset()Chrome Full support 37Edge No support NoFirefox Full support 54IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Firefox Android Full support 54Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 3.0
path()Chrome Partial support 46
Notes
Partial support 46
Notes
Notes Only supported on the offset-path property.
Edge No support NoFirefox Partial support 63
Notes Disabled
Partial support 63
Notes Disabled
Notes Only supported on the clip-path and offset-path properties.
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Partial support Partial
Notes
Partial support Partial
Notes
Notes Only supported on the offset-path property.
Safari No support NoWebView Android Partial support 46
Notes
Partial support 46
Notes
Notes Only supported on the offset-path property.
Chrome Android Partial support 46
Notes
Partial support 46
Notes
Notes Only supported on the offset-path property.
Firefox Android Partial support 63
Notes Disabled
Partial support 63
Notes Disabled
Notes Only supported on the clip-path and offset-path properties.
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Partial support Partial
Notes
Partial support Partial
Notes
Notes Only supported on the offset-path property.
Safari iOS No support NoSamsung Internet Android Partial support 5.0
Notes
Partial support 5.0
Notes
Notes Only supported on the offset-path property.
polygon()Chrome Full support 37Edge No support NoFirefox Full support 54IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Firefox Android Full support 54Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 3.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기