Make color transparent on pictures. CSS. .JavaScript?

Question

css

Good day. There is such a problem. There is a picture in which a triangle is drawn with an outline on a green background. The triangle itself is transparent inside. I save the image as png. I paste into the browser (html). I put a background (css) on the image, which is distributed over the transparent layer. As a result, I have a triangle with a applied background, and a green background around it. I want to get rid of the green background around the textured triangle. That is, make green transparent. It is necessary to make the background of the triangle transparent in the browser. Tell me where to dig, or any other advice I will be glad.
Thank you for your attention.

Answer 1

Dig towards svg. By implementing the triangle in this way, you can control its components through css.

Answer 2

using css, the triangle is made through the border - just set three sides instead of four. Here is an article on this topic htmlbook.ru/blog/treugolniki-cherez-css - should help in this matter.

Answer 3

Canvas will help, but it will be heavy for the processor.
I don’t know why everything is so complicated with you, but in my opinion it’s better to use clip-path here (google)

Answer 4

Thank you very much for your replies, I'll think about it. For example, I gave a triangle, the task is generally to apply a background to non-standard forms. This is difficult to do by conventional means, since the picture is always rectangular in shape. I came up with a perversion with drawing a background on a transparent part of the picture, so far I have not found other ways.