Criando um triângulo transparente com borda usando CSS

Criar formas complexas com CSS pode ser desafiador, mas quando se trata de triângulos, existem várias abordagens para alcançar o que você deseja efeito.

Um método que você experimentou envolve a utilização de bordas. Embora essa técnica funcione, ela depende de truques visuais. Existe uma solução mais elegante?

Sim, existe! Uma abordagem exclusiva do webkit envolve o aproveitamento do caractere Unicode U 25B6 (▲). Veja como:

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

▲

Este código aproveita a propriedade de traço de texto para delinear o caractere como um triângulo. A transparência da cor permite que o interior permaneça vazio, enquanto o tamanho da fonte controla o tamanho da forma.

Embora esta solução seja específica para navegadores de webkit, ela fornece uma maneira concisa e visualmente impressionante de renderizar um triângulo transparente com fronteira.