5.1: Clip-path Property
- Page ID
- 26411
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
"Arch" by Franz Bachinger from Pixabay
The Clip-path Property
The clip-path property reminds me of looking through a view port on a ship or a window in a house. Only a portion of the landscape is visible through the hull or the wall. The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.2
The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.2
It’s very common to use an image with a clip-path, but this isn’t the only thing it can be used with. Try it out with some text or other inline elements.2 For animation purposes, Clip-path can be used on any basic shape.3 Basic shapes are inset(), circle(), ellipse(), and polygon().1
Basic shapes are inset(), circle(), ellipse(), and polygon().1
As we go forward through these four basic shapes, keep in mind that positions can be set with pixels or percentages.
Positions can be set with pixels or percentages.
In the image below, if you wanted to set a positions that is in the complete lower right hand corner, you would state that as 100% 100%. If you wanted something in the middle of the bottom edge of the image, that would be 50% 100%. The first number is the X value and the second number is the Y value.
Example of Using Percentages to Set Positions
Values for the Clip-path Property
Let's look now at the different values that you can set on the clip-path property: inset(), circle(), ellipse(), and polygon().
The values that you can set on clip-path are inset(), circle(), ellipse(), and polygon().
Inset()
Inset() will define a rectangle-shaped vector path. 1 The code would look like this:
clip-path: inset(50px 100px);
The first number defines the rectangle's upper left corner in pixels, and the second one defines the lower right corner. Keep in mind that you could use percentages here instead of pixels, too. Play around with the numbers in the CodePen below and see how the rectangle changes.
See the Pen CSS Clip-path Property: Inset() by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
Circle()
Circle() defines a circle-shaped vector path. 1 Here is what that code will look like:
clip-path: circle(30% at 50% 50%);
The first number defines the radius, while the last two numbers show where the circle should be located. 1
See the Pen CSS Clip-path Property: Circle() by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
Ellipse()
Ellipse() functions much like the circle(). The one thing that sets this shape apart is that you define two radii rather than just one. 1
clip-path: ellipse(130px 140px at 10% 20%);
See the Pen CSS Clip-path Property: Ellipse() by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
Polygon()
This defines a polygon "using an SVG filling rule and a set of vertices." 1 You can have as many vertices (points) as you want! Just keep defining them in a clockwise motion around the graphic.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
See the Pen CSS Clip-path Property: Polygon() by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
The last thing to do for clip-paths is to head over to Clippy and play! Try several different clip-paths on their backgrounds. You'll have fun!
Bibliography
1. “Clip-Path - CSS∷ Cascading Style Sheets: MDN.” Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/.../CSS/clip-path.
2. Cope, Sarah. “Clip-Path: CSS-Tricks.” CSS Tricks, CSS Tricks, 27 Nov. 2020, https://css-tricks.com/almanac/prope...s/c/clip-path/.
3. CSS Clip-Path Property, W3Schools.Com, https://www.w3schools.com/cssref/css3_pr_clip-path.asp .