Генератор CSS-треугольников
Создайте треугольник на чистом CSS с помощью классического трюка с прозрачными рамками, с живым предпросмотром и готовым к копированию кодом.
Как это работает
Трюк основан на том, что элемент без ширины и высоты с толстыми рамками отображает рамки, сходящиеся в остриё. Если сделать две рамки прозрачными и окрасить третью, получится треугольник, указывающий в нужном направлении — изображение или SVG не нужны для стрелки тултипа или декоративного курсора.
Зачем использовать этот трюк вместо изображения?
Чистый CSS-треугольник не требует ни одного сетевого запроса, идеально масштабируется и мгновенно меняет цвет через CSS-переменную, в отличие от растрового изображения или даже внешнего SVG.
Можно ли анимировать цвет или размер треугольника?
Да, так как это стандартные CSS-свойства (border-color, border-width), их можно плавно изменять с помощью transition или @keyframes, как и любое другое CSS-свойство.
Обработка 100% локально: код генерируется полностью в вашем браузере через WebAssembly.