Use a CSS Polygon Clip Path to Create Complex Shapes
In this lesson, we create arms for our Egghead spectacles. To do this, we create a normally sized element and then clip away the excess that we don't need using a polygon clip with CSS clip-path.
Leveraging the stacking context means we only see the parts of the spectacle arms that we desire.
Jhey Tompkins: [0:00] The last element for us to style are the spectacle arms. We have to remember though, that these aren't inside the spectacle container anymore, so we need to be mindful of that when we're doing any positioning or sizing that is based on the egg container, and not the spectacles container.
[0:17] With that in mind, we can remove the background color from the spectacles and start styling spectacle arms. We might find it easier if we first hide the spectacles. This allows us to focus on styling the spectacle arms. We follow the same process as with our other elements, beginning with a background-color.
[0:40] Then we estimate a height and a width. Let's reduce the opacity so we can see the trace. Let's center a line by using position: absolute, left: 50%, and a transform: translate(-50%, ). We need to define a top value to position the arms where we want them. Let's try 35%. That looks quite close, but the width is maybe too large. Let's knock that down to 90%.
[1:16] At the same time, we can see this corner is slightly overlapping where our lens might go. Let's bump the top value to 36%. We are going to use a different clip-path value to clip-paths for element away.
[1:29] To make this easier, we can try and align the bottom of our element with the baseline for the two spectacle arms in our image. We can do this by reducing the height.
[1:41] When we clip the element, we will be clipping from the top-left corner across and down. We will travel across, back up to the right corner, down, cut off this corner, go across, and then cut off this corner.
[1:56] Any parts of the spectacle arms that overlap the eggshell will not be seen. That is because the spectacle arms are below the eggshell in the stacking context. Therefore, the eggshell will sit above the spectacle arms hiding this part.
[2:13] To clip our spectacle arms, we're going to use the polygon value. The polygon function accepts any number of x/y-coordinate pairs where x and y are relative to our element. Here, a polygon of 00, 00, 00, 00 will clip our entire element. That's because we have four points, which are all in the top-left corner of our element.
[2:40] If we change our polygon values to 00, 100% , 100%, 100%, and 100%, this will be the equivalent of using the insert function with 00, 00 because the first point is 00. The second point is 100% of the elements width and % of the elements height.
[3:08] The third point is 100% of the elements width and 100% of the elements height, and the fourth point is % of the elements height and 100% of the elements height.
[3:20] If we remove the last set of points, we get a triangle because we're cutting from 100%, 100%, which is the bottom-right corner, back to 00. For our spectacle arms, we can count the points out.
[3:32] One point here in the top-left, down to a second point somewhere here, a third point around here, fourth point in the top right corner, a fifth point somewhere around here, a sixth point at the base, a seventh point again at the base, and an eighth point near to our starting point. Then we finish back at the top-left corner.
[3:51] Let's attempt to make those points. We can have the top-left is 00. Then let's try 25% by 55%. Because our spectacle arms are symmetrical, we can go with 75% and 55% for the third point, and then 100% and for a fourth point. We can try 100% 80% for the fifth point.
[4:16] Let's attempt to use the same x value as to point above with 75%. It's at the baseline, so 100%, 25% 100% and to finish, and 80%. That isn't too far away. If we hop back into DevTools, we can configure the clip-path until we get the shape that we desire. Copy that value and apply it in our CSS.
[4:41] Now we've created all of the elements, we can remove the opacity and show our specs. We can show the eggshell.
[4:48] In review, we've used absolute positioning and transform to position our element. We used a width and height that matched our image as closely as we could. Then we used a polygon clip-path to clip away the pieces of our element that we didn't need.
[5:03] That allows us to create complex polygon shapes by passing in pairs of x and y percentages. These percentages are relative to the bounds of our element. Unhiding the eggshell hides the section of the spectacle arms that we don't need to see