Posted November 27, 2018
Filed Under: blog
I’ve talked about CSS Borders a bit already. But I came across another use for them today: a “reverse” chevron, or causing an element to appear like a chevron. It’s a little hacky and takes strong advantage of the cascade.
The constraints: an element (a
div, for our purposes) needs to have a chevron at the bottom. We can’t use
clip-path or pseudo-elements because we need to support really old versions of IE. So we also can’t use
transform or complex background linear-gradients.
Luckily, we can fake a chevron with the borders of a second element. Let’s recap how CSS Borders work.
An element has four borders, one each at the top, right, bottom, and left. Each of these borders have distinct properties, like color, thickness (height/width), and style. Because each border can be unique, there is a clear point where they meet – a visual which can distinguish the borders.
Typically, border properties will be declared in a single go, such as
border: 1px solid red;. But at larger border thicknesses and with different colors, the distinction is clear. We can utilize this fact to create different shapes in CSS, including (but not at all limited to): triangles, chevrons, stars, diamonds, and a whole bunch of other stuff. Here’s a pen to visualize the border threshold that I’m talking about:
So, using a transparent top border, we can create the reverse chevron. All we need to do is match the border height to the desired height of the chevron. I also added a little padding to the bottom of the first
div to disable any sort of content overflow and pulled the second div up so that there’s not too much whitespace.
For some more CSS Border trickery, I suggest checking out this CSS-Tricks article.