In this quick tutorial, we'll take a look at a practical example where the clip-path property can make your life easier. We're going to design a CSS triangle that inherits some properties from its parent.
A few days ago, we updated the Tooltip component and replaced the 'border hack' with the clip-path method to create CSS triangles (the small arrow appearing beside the tooltip).
In this specific case, using clip-path brought a few advantages. We're going to take a look at them, as well as a few other nifty CSS tricks.
👉 I'm aware the clip-path property is not supported in all browsers. However, it's currently supported in all major browsers (except Microsoft Edge), so it's OK to use it if what you're creating is an enhancement and it won't break user experience in older browsers.
Probably the most popular approach to creating CSS triangles is the border hack:
If you set height and width of an element equal to 0, then apply a transparent border, if you then set only one border color (e.g., border-bottom-color) to any value you want, you end up with a triangle. It's a cool trick, and we also have a mixin in our framework that does exactly this:
However, this method has some limitations. If we consider the tooltip case, the triangle can't inherit the background color of the parent (you're forced to set a variable, or to update two values). Also, if you set a border on the parent, it's not easy to set a border on the triangle too (we're using the border property to create the triangle itself).
An alternative approach would be using inline SVG code. Smart, but not as simple as using a <div> or a pseudo-element.
One method I've been experimenting with and that seems cool consists of using the clip-path property:
The idea is simple: we turn a square into a triangle using the clip-path property. To do so, you need to pass to the polygon function three sets of coordinates:
0% 0% 👉top left corner
100% 100% 👉bottom right corner
0% 100% 👉bottom left corner
Remember the first coordinate defines the position on the x-axis, while the second one on the y-axis.
What's the advantage of using clip-path? For starter, we can set both background-color and border values equal to inherit. Anytime you update the style of the tooltip, the triangle is updated as well. Secondly, you can set a border radius and make the triangle...well...rounded. I realize it's not something you plan on often doing. But still, it's a neat trick!
What about older browsers? We can use the @support rule to show the triangle only in browsers supporting clip-path. In those that don't, we hide the triangle.