If you’re looking for a way to put together a pair of triangular links or that will form a solid square or just a single triangular element that is still linkable (read: not using any border tricks to form triangles), here’s a quick rundown of one method to do so.
When I went out looking for options, everything I ran across was just examples of rotating a square element inside of a parent (square) and doing a overflow:hidden, on it which seemed to me to be far more difficult than it needed to be to get things positioned correctly. With that in mind, I was aware of clip-path as a possible option, so I just went with it since it seemed like a pretty straightforward approach without any real tricks or caveats I am aware of.
Results were pretty good:
CanIUse has clip-path sitting at about 90% Global, so I’d say it’s a solid solution with good support. If you’re looking to support additional older browsers, you can look into a polyfill like Alfonso Filho’s ClipPath, though I haven’t tested this quick demo with it yet.