How to make a diamond shape using the <svg> element?

Question

I'm trying to create a diamond using the and HTML5 elements. I specified the point, but instead of being filled into a rhombus, it was filled into a pair of triangles. This is my approach:

<div>
    <svg width="2000" height="2000">
    <polygon points="25 25, 75 25, 50 50, 50 0" style=" fill: blue; stroke:black;"/>
    </svg>
</div> 

Answer 1

I hope you like it

<svg width="2000" height="2000">
  <polygon points="0 40,40 80,80 40,40 0" style=" fill: blue; stroke:black;"/>
</svg>