Which is better to use - CSS, img, SVG?

Question

css

Hello, please tell me, it is necessary to make a hat from a right-angled triangle, through which it will be better and more correct to implement this? I tried using img, it seems to me not a good option, since the quality of the edges of the picture turned out to be intermittent. I read about svg, as I understand it, a line is drawn there, will it be possible in this case, for example, to fill the resulting triangle with some color and place a menu on it, and so that everything works correctly? Or is it better to do it through css using border? and if done via css, won't the invisible area overlap the content that is under it?

Answer 1

By now, one of the best options for implementing a simple geometric shape (or a combination of several simple shapes) is to use SVG, or transform familiar HTML elements. There are two ways to use the resulting SVG code:
Allows you to track events in Javascript (all sorts of clicks, etc.) and states in CSS (like :hover) for any shape from the set. All SVG elements (except for a number of non-visual ones) are styled in CSS. This means that they can be animated using CSS.
For example, I created for the sake of training and an example codepen.io/cleric/pen/ktGfa.
Using data:uri we use the SVG code, as if we were specifying the image code:
Technically, viewBox is optional - you can experiment with background-size. The disadvantage of this solution is that the animation of the figures will not work, only the entire container in which this picture is located. Well, we also forget about individual events that occur within the contour of the figures.
There is an option to transform and crop normal elements using transform and overflow. For example, like here tympanus.net/Tutorials/CircularNavigation (despite the fact that the code there is redundant and incorrect work is provided solely by the efforts of the author of this site). But here there are much fewer options and effort will be required above the roof.
Update:
On another topic Why does the object tag add a #document child object to it?there is an example using SVG.

Answer 2

I would make css, but the choice is yours, it all depends on the case, Who prevents you from making 3 options and seeing which one suits your tasks better?
It turns out that there are still people confusing Java and javaScript.