How to make different geometrical shapes using CSS?

Answer 1

Ummmm try
-webkit-clip-path:polygon();
or
-webkit-clip-path:url(#theIdOfSvg that you draw custom shape)
property
//warning: only try in chrome

Answer 2

If you don't want to be tied down to webkit-based browsers, check out:
https://www.w3schools.com/howto/howto_css_shapes.asp