Создайте CSS-треугольник на границах без изображений.
width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #157a54;
Треугольники в CSS делают через хитрость со свойством border: у элемента нулевого размера видимой остаётся только одна цветная граница. Инструмент собирает готовый код треугольника нужного направления и размера без картинок.
Стрелки выпадающих меню, «хвостики» всплывающих подсказок и речевых облачков, указатели и декоративные элементы. Треугольник на чистом CSS легче картинки и масштабируется без потери качества.
У элемента с нулевыми размерами границы сходятся под углом. Оставив видимой одну сторону, получают треугольник — это классический CSS-приём.
Да, направление зависит от того, какая граница окрашена. Инструмент позволяет выбрать его и задаёт нужные стили.
CSS-треугольник ничего не весит, масштабируется без размытия и легко перекрашивается через стили.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.