Use Oversized Elements with CSS Clip Path to Create Complex Curves
In this lesson, we style the bridge of our Egghead spectacles. The trick to creating some shapes is to use oversized elements that we then clip the excess from. Here we create an element much larger than required in order to achieve the shape we want and then clip away the excess.
Jhey Tompkins: [0:00] Now, we're ready to style the bridge for our spectacles. If we look at the bridge, it has this round top. To achieve that, we could use an element that's much bigger and then clip it.
[0:10] Let's start with reduced opacity and absolute positioning. Let's try a height: 100% and a width: 30%. We can see the bridge isn't quite at the top of the container, so a top: 2% and we use a left: 50%. We use transform: translate to center the element, translating it negatively 50 percent of its own width and try a background-color of purple.
[0:46] That doesn't look too far from what we need. Let's remove the background-color and swap it out for a border. We can use our responsive unit, a solid border type, and the color we defined earlier.
[1:05] Jumping into DevTools allows us to adjust the styling. We can make adjustments until we find a shape we are happy with. Once again, it's about compromises and it's finding a shape that we are happy with. The more accurate we want to be, the more complex our illustration will get. Let's apply those styles to our CSS.
[1:27] Now we're at a stage where we can use a clip-path again to clip the unwanted parts of the element. We can use inset. We don't want to clip anything from the top, so for the top. Let's try coming in about 20 percent from the right and 20 percent from the left and maybe 60 percent from the bottom, 20 percent right, 60 percent bottom, and 20 percent left. That looks pretty good.
[1:55] The last thing we need to do is remove the opacity declaration. Now our spectacles are starting to take a shape.
[2:01] In review, we styled our bridge element using a basic border-radius on an absolutely positioned element that we then use clip-path on to clip off the excess that we don't want to see. This gave us the bridge shape that we wanted.