CSS Transform square into thinner rhombus
问题 How to create a 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. 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.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. 回答1: -webkit-transform: rotate(45deg) skew(20deg, 20deg)