How to create a transparent triangle with border using CSS?

I’ve found a webkit-only solution, using the ▲ character:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

<div class="triangle">&#9650;</div>

Extras:

• CanIUse reference for text-stroke – all major browsers covered as of 2019
• CSS-tricks article
• Useful HTML shapes