title: CSS Transform square into thinner rhombus
body: <p>How to create a rhombus:<img src="https://i.stack.imgur.com/sNXTG.jpg" alt="rhombus"> (as shown in red) by transforming a square using css? Only points B and C must move. Original size of square is 25px by 25px.</p>
  
  <p>I'm trying to achieve this result and would later rotate it 45 degrees so that it would look like a diamond. I think this can be done using the transform:matrix();</p>
  
  <p>P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html.</p>