Сделать прозрачным цвет на картинки. CSS. .JavaScript?

Question

[livemirsi]

Доброго времени суток. Есть такая задачка. Есть картинка, на которой нарисован треугольник с контуром на зеленном фоне. Сам треугольник внутри прозрачный. Сохраняю картинку в png. Вставляю в браузер (html). Наношу background (css) на картинку, который распределяеться по прозрачному слою. В итоге имею треугольник с нанесенным фоном, и зеленным фоном вокруг него. Хочу избавиться от зеленного фона вокруг текстурированного треугольника. То есть зеленый сделать прозрачным. Надо именно в браузере делать фон треугольника прозрачным. Подскажите куда копать, или любому другому совету буду рад.
Спасибо за внимание.

Comments

[livemirsi]

Попробовал clip-path, но у него проблемы с поддержкой браузеров. Потом нашел вот такую библиотек https://github.com/AlmogBaku/imageMask. В итоге получается так, рисуем прозрачную форму в png, фон заливаем любым цветом, потом на картинку накладываем маску с помощью библиотеки и фон отсекается. Пока не знаю какая будет производительность, так как картинок может быть до 50 штук на страницы, еще не успел потестить.

Answer 1

[Алексей Николаев]

Копайте в сторону svg. Реализовав треугольник таким образом, вы сможете управлять его составляющими через css.

Answer 2

[Олег Машко]

с помощью css треугольник делается через border - просто задаете три стороны вместо четырех. Вот статья на эту тему htmlbook.ru/blog/treugolniki-cherez-css - должно помочь в даном вопросе.

Answer 3

[Pavel K]

Canvas поможет, но для процессора тяжеловато будет.
Не знаю, почему у Вас так всё замудрено, но по-моему тут лучше использовать clip-path (гугл)

Answer 4

[livemirsi]

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