Some Neat CSS Tricks — Clip-path And Transform

I’ve been on somewhat of a design binge lately and part of that process has been getting more comfortable in dealing with CSS. I wanted to take some time to explain a couple of neat little things you can do in CSS; one being the “clip-path” property and the other being the “transform” property.

Clip-path is used to clip and show only certain parts of your image or background. This can be useful for creating a cool background shape for your website. The values that you use to define your clip-path make a shape, and anything inside this shape is shown, while anything outside is hidden. Let’s get started with some very basic html, and have a div that will be the background.

We use the universal selector (*) to choose all elements and reset the style to not have any padding or margins. Different browsers use different default padding and margins and we don’t want to use those so that we can have more control over the sizing of our elements.

Now let’s add a gradient as our background image for our div and clip that gradient. Clip-path can take in a number of methods in order to determine how to clip. The ones that seem most useful to me are circle, polygon, and ellipse.

We used the polygon method as our clip-path. The three values you see listed are points in our div. The first value (50% 0%) is the x and y value of our first point. The first point starts from the top left. So that’s 50% on the x-axis away from the top left corner of our div. Then 0% or no movement on the y-axis. This puts our first point in the top middle of our div (which is spanning the entirety of the viewport). The second point (100% 100%) is all the way to the right from top left, and then all the way bottom of that. This puts our second point in the bottom right hand corner of our div. Then finally our third point (0% 100%) is no movement on the x-axis which means it stays in the top left corner of the div but then is moved all the way to the bottom of our div, which puts it in the bottom left hand corner of our div. What kind of shape does that make?

That’s right, a triangle! If we want to make a trapezoid our clip-path would look like this:

Circles and ellipses work a little different. For circles you specify the percentage of your diameter along with where the center of your circle is, and for ellipses you specify the diameters on the x-axis and the y-axis along with where the center of the ellipse is.

The first 50% is the diameter and the two other 50% values are where the center of the circle is on the x and y axes.

The ellipse method works the same except it has two diameters.

If you want to experiment with all the ways you can clip images this site is a great tool.

Let’s keep this ellipse clip and use our handy transform tool to center some text in the middle.

We’ll create a div that will contain our h1 with the text we want to center.

Aside from the styling of the text (color, letter-spacing, and font-family), we need to use absolute position and then we move our text 50% from the top and 50% from the left. But this makes our text start at the center and not actually in the center of our screen.

In order to center we’ll add a transform to move our text-box element from here.

Presto! A perfectly centered element.