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:

See the Pen CSS Border Example by Nate Northway (@the_Northway) on CodePen.

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.

See the Pen CSS Reverse Chevron by Nate Northway (@the_Northway) on CodePen.

For some more CSS Border trickery, I suggest checking out this CSS-Tricks article.

No Comments...yet