Drawing shapes in CSS is handy sometimes. The one shape I keep looking up regularly is the triangle hack using borders. I also used it as part of the project Angehörigendialog where I spend a lot of time making a website look good on print. By doing so I encountered many huge browser quirks and also a rather small and insignificant Firefox bug affecting my beloved triangle shape hack. Thus, I want to give it the attention it wouldn't get otherwise.
In the Codepen that I prepared for you, you can see different implementations of the triangle shape using the border hack and an alternative solution. The first one calculates the size of the triangle according to the font size. This was the original implementation I had in the project. Just to make sure that it has nothing to do with the relative unit or the fact that it is a pseudo-element, I created the following examples.
When you print it to a PDF in Firefox and look very closely at the result (zoom in a little maybe), you will see the issue. Depending on your PDF reader you will see different artefacts. For me, the triangle is split in half and also a little shifted to the right. In Chromium, the problem is less apparent to me. Here, the triangle has only a small vertical offset. For your convenience, I included the PDF below (created with Firefox 83 on Linux). I case, you do not have the problem on your machine, please have a look at the screenshot.
I case, you do not have the problem on your machine, please have a look at the screenshot.