[Part 1] Building mountains: CSS’s clip-path

Have you every tried to cut a shape into an image (or a div)? Clip-path cuts shapes out of an element using simple coordinates. It trims what you don’t want and leaves the rest showing. Once you understand how the browser reads points and percentages, you can build clean cuts, sharp angles, and full custom shapes without extra wrappers or images.

What is clip-path used for

Clip-path hides the parts of an element you don’t want by cutting a shape out of it. The browser keeps only the area inside the outline you define and throws away the rest. This gives you shaped sections, angled cuts, and custom frames without extra markup or images.

Polygon rules and coordinates system

When you use a polygon with clip-path, it’s like drawing a shape on a Cartesian plane. Each point has an x (horizontal) and y (vertical) value.

Then to create a Polygon we can connect the points in the order you list them, then closes the shape back to the first point. Think of (-5, 5) as the top left edge and (5, -5) as the bottom right edge of the element. If you mix up the order or coordinates, the shape won’t come out right.

Now that we have an idea on how to create a polygon in a cartesian plane we can apply the same thinking to clip-path’s polygon but instead of using cardinal coordinates we can use percentages. We can draw a simple triangle:

Clip-path basic shapes

You may have noticed that our polygon was nothing more than a simple triangle. Luckily clip-path provides basic shapes that we can use and not have to calculate ourselves.

Here are a few examples on clip-path applied to a simple image:

.polygon {
    clip-path: circle(40%);
}

.polygon {
    clip-path: ellipse(80% 40% at 5% 50%);
}

.polygon {
    clip-path: rect(5px 100px 100px 5px round 20%);
}

.polygon {
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}

Browser support

According to caniuse.com, browser support is steady across modern engines. Old prefixes aren’t needed. The shape works the same in major desktop and mobile browsers. The only real limit is heavy polygons on low-end devices, which can cost paint time. Keep shapes simple when you can - although we are about to get heavy on the next article.

Next, we’ll use clip-path with polygon to shape a pixel style mountain. The outline will come from a small algorithm that builds random points and changes the slope each time. This gives you a simple way to spawn different terrain shapes without hand-drawing anything.