Создание прозрачного треугольника с рамкой с помощью CSS

Создание сложных фигур с помощью CSS может быть сложной задачей, но когда дело доходит до треугольников, существуют различные подходы для достижения желаемого эффект.

Один метод, с которым вы экспериментировали, предполагает использование границ. Хотя этот метод работает, он основан на визуальных трюках. Есть ли более элегантное решение?

Да, есть! Эксклюзивный для Webkit подход предполагает использование символа Юникода U 25B6 (▲). Вот как:

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

▲

Этот код использует свойство обводки текста, чтобы очертить символ в виде треугольника. Прозрачность цвета позволяет внутренней части оставаться пустой, а размер шрифта контролирует размер фигуры.

Хотя это решение специфично для браузеров Webkit, оно обеспечивает краткий и визуально яркий способ визуализации прозрачного треугольника с помощью граница.