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

clip

accent-color

align-content

align-items

align-self

all

animation

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timeline

animation-timing-function

appearance

aspect-ratio

backdrop-filter

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

block-ellipsis

block-size

border

border-block

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-end-end-radius

border-end-start-radius

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-start-end-radius

border-start-start-radius

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom

box-decoration-break

box-shadow

box-sizing

caption-side

caret

caret-color

caret-shape

clear

clip

color

color-scheme

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

contain

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

container

container-name

container-type

content

content-visibility

continue

counter-increment

counter-reset

counter-set

cursor

direction

display

empty-cells

filter

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

font

font-family

font-feature-settings

font-kerning

font-optical-sizing

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

font-weight

forced-color-adjust

gap

grid

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column

grid-column-end

grid-column-start

grid-row

grid-row-end

grid-row-start

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

height

hyphens

image-rendering

initial-letter

initial-letter-align

inline-size

inset

inset-block

inset-block-end

inset-block-start

inset-inline

inset-inline-end

inset-inline-start

isolation

justify-content

justify-items

justify-self

left

letter-spacing

line-break

line-clamp

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-block

margin-block-end

margin-block-start

margin-bottom

margin-inline

margin-inline-end

margin-inline-start

margin-left

margin-right

margin-top

mask

mask-border

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-clip

mask-composite

mask-image

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

math-depth

math-shift

math-style

max-block-size

max-height

max-inline-size

max-lines

max-width

min-block-size

min-height

min-inline-size

min-width

mix-blend-mode

nav-down

nav-left

nav-right

nav-up

object-fit

object-position

opacity

orphans

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-block

overflow-clip-margin

overflow-inline

overflow-wrap

overflow-x

overflow-y

padding

padding-block

padding-block-end

padding-block-start

padding-bottom

padding-inline

padding-inline-end

padding-inline-start

padding-left

padding-right

padding-top

paint-order

perspective

perspective-origin

place-content

place-items

place-self

pointer-events

position

print-color-adjust

quotes

resize

right

rotate

row-gap

scale

scroll-behavior

scroll-margin

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

shape-margin

shape-outside

tab-size

table-layout

text-align

text-align-all

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-indent

text-justify

text-orientation

text-overflow

text-shadow

text-transform

text-underline-offset

text-underline-position

top

transform

transform-box

transform-origin

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

translate

unicode-bidi

vertical-align

visibility

white-space

widows

width

word-break

word-spacing

word-wrap

writing-mode

z-index

zoom

World Wide Web Consortium (W3C)

HomeMenu