HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

clip-path

Description

The clip-path property for CSS specifies a basic shape or references a element to create a clipping path.

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

Examples

1 · basic-shape · circle

2 · basic-shape · ellipse

3 · basic-shape · inset

4 · basic-shape · path

5 · basic-shape · polygon

6 · clip-source

7 · none

8 · JS