I needed to add a border to the arrow in the Popover component from radix-ui.

The HTML that is generated looks something like this:

<svg style="display: block;" width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none">
  <polygon points="0,0 30,0 15,10"></polygon>
</svg>

Putting that in geometric terms, it would be like this:

Based on this lovely answer by Paul LeBau on StackOverflow, this can be accomplished using stroke-dasharray with values of:

1. 0 (draw nothing)
2. 30 (skip 30, or the base of the triangle)
3. draw the remaining two sides

Using Pythagorean theorem, one side is:

$$c=\sqrt{a^2+b^2}=\sqrt{10^2+15^2}\approx18.02776$$

Two sides => 2*18.02776 = 36.05552

Hence, stroke-dasharray should be 0 30 36.0555.

It's not perfectly, namely this issue happens on the very edge: