## 1. Borders on `::before` and `::after`

This is the classic approach with three transparent and one colored border. It has the disadvantage that the clickable zone of a link is still a rectangle. Go for instance to the top left corner of the second link. You will notice that you are actually already on the third link.

- Link
- Link
- Active
- Link
- No link

## 2. Skewing and rotating `::after`

With this approach the clickable zone is identical to the visual representation of a link - you move outside of the triangle and are on the next link.

- Link
- Link
- Active
- Link
- No link

## 3. Cutting off with `clip-path: polygon()`

A third way to achieve this is to use `clip-path: polygon()` . Browser support meanwhile is OK-ish .

- Link
- Link
- Active
- Link
- No link