1. Elipitcal Clip Paths

The outer section has a background of pink, while the nested--but same-sized div underneath--has an ellipitcal clip-path on it. This means that whereever the nested div's clip path intersects with the pink section, it cuts that section out and reveals its own background color, in this case black.

The elipse scales with screen size only because we used percentages to define the elipitcal clip path. If we had used pixels, it will not scale with screen size, which is not what we want. You should always use percentages or relative values for creating clip paths for this reason. See css code comments for more details on positioning

Note that we have to be careful where we put our padding. If we put padding on the pink sextion, the clip-path will be cut off according to that padding, which creates a different shape-type. On the other hand, if we put padding on the container that houses the clip path itself, you'll have to make the ellipse larger in order for it to span the padding put on its own container. It might be best to put padding on a third nested element, such as our "fixedWith" div in this case. Note that the bottom padding will have to be substantially increased (maybe with calc) to keep the lower text from disappearing into the sides of the elipse at skinnier screen widths. The current padding/content works down to 350px or so. Or we could adjust the elipse so that it is wider at smaller screens. On the other hand, if there is a lot of content, we may wish to use another technize, such as CSS mask-image or the CSS background-clip properites.

Clip paths are fully animatable in both size and position!

This is probably a more practical use case for clip-path. This section is a normal element without a clip path. We then have a totally separate section BELOW the first section that has a nested div with a clip apth on it. This second section has a containing div with a white background. Then, its inner div has a purple background and a clip path that shows through to make the purple elipse.

The elipse scales with screen size only because we used percentages to define the elipitcal clip path. If we had used pixels, it will not scale with screen size, which is not what we want. You should always use percentages or relative values for creating clip paths for this reason.

Elipitical, circular or polygonal paths can be made with online generators. Once a basic path is created, use Firefox dev tools to help you modify the path. Firefox is currently the only browser thatt allows this. Inspect the element with a path in Firefox and a bounding box with points appears. Click and drag to change the shape or double click right on the line of the shape to add another point. Then copy the code Firefo generates into your css file.

Note that when an area is clipped, anything outside that won’t receive any pointer events. That means the user can’t hover over it.

2. Clip Paths with Inset and even rounded corners

This path is created by using the css property inset on the element nested within the wrapper with the fuscia background. The clip path elmeent has a blue background. There must be padding on this element at least equal to the valueof the inset or it will not show entirely. Paths can be put on most elmeents, including images!

2i) Animating Clip Paths with Inset: Reveal (could be set to reveal on scroll)

The blue rectangle can be completely invisible by applying inset(50%). Yes, the value that makes it invisible is 50% because we are applying an inset from the four sides. In other words, the inset is being applied from the edge to the center of the rectangle.

2ii) Animating Clip Paths with Inset: Reveal from top or bottom (could be set to reveal on scroll)

We can also control the direction of the reveal transition. To do that, we need to only use one value from the four sides. For example, if we want a top to bottom transition, the bottom value should be transitioned from 100% to 0. See code for more examples. Also, would look better if parent was the same size as the clip path div.

2iii) Animating Clip Paths with Inset on Pseudo Elements: 4 Effects (Difficult to understand how content always shows thorugh, but it does. See code.)

more
more
more
more

3. Circle Clip Paths clip-path: circle(80px at 50% 50%);

3i) Circle Clip Path Animations

more
more
more
more
more
more
more

4. Polygon Clip Paths

I have this clip path: clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); While my parent has the goldenrod background.

Polgyonal clip paths are setings of x-, y-axis coordinates that are joined together (the path automatically closes) to create a shape. They are animatable too, if you want. Remember that Firefox dev tools allows you to add, modify points (see elipses above)

This is an independent, normal and square section (with padding top) with the same background color as the parent above, so the background looks continous. Remember the grey polygon clip is on the goldenrod CHILD above

4i) Polygon Clip Paths With "Borders"

Box shadows or borders on the clip-path element will be clipped. But, by adding multiple polygonal paths of the same amount, we can acheive a borderd look like this. You just have to fool (in Firefox dev tools) to get the second border the way you want it.

5. Clip paths with using "path"

clip-path: path("yourPathHere");

NOTE: THESE TYPE OF PATHS CANNOT BE EDITED WITH FIREFOX DEV TOOLS

BROWSER SUPPORT IS NOT CONSISTENT FOR THIS PROPERTY AS OF JULY 2023

IMPORTANT NOTE: CLIP-PATH:PATH ONLY WORKS WITH ABSOLUTE PATHS, NOT RELATIVE ONES. THE DIFFERENCE IN PATH-CODE BETWEEN RELATIVE AND ABSOLUTE PATHS IS NOT EASILY DISCERNABLE, BUT MOST SVGS ARE CREATED WITH ABSOLUTE PATHS. YOU CAN USE ONLINE TOOLS TO CREATE SVGS OR A PROGRAM LIKE ILLUSTRATOR

THESE ABSOLUTE PATHS DO NOT SCALE (THIS IS WHY THE PATH IS CUT OFF ON LARGER SCREENS) AND SO HAVE LIMTED USE. SEE THE SECTION BELOW FOR THE SOMEWHAT COMPLEX STUFF YOU NEED TO DO TO USE RELATIVE PATHS by embedding an svg AND SO HVE THE PATH SCALE ON WINDOW RESIZE.

Here is an online generator that creates waves: https://getwaves.io/

Here is an online svg creator https://boxy-svg.com/app

5i) Clip paths with using with embedded SVGs

The first thing you need to do is to convert your SVG from the default absolute path to relative path. This can be done online here https://yoksel.github.io/relative-clip-path/

Then, delete/edit the SVG code so it looks like the SVG code below, in "yourSVGclass. You don't need anything else but a class on the svg, the "clipath" element with an ID on it (that you reference in the next step) and the attribute "clipPathUnits="objectBoundingBox", and, of course the "path"

Then, we put "clip-path: url(#yourId);" into our css for the child element

Finally, since the svg is actually on our page (taking up whitespace at least), we hide the svg (don't worry the css can still read its path attribute) with css by adding the following css on "yourSVGclass": position: absolute; width: 0;, height: 0;, which ides the SVG from display.

Now the path will scale with the viewport.