css中怎么让div变成菱形

CSS中可以利用transform属性来将正方形的div变成菱形。

div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg);
} 

上述代码会将div元素旋转45度，使其变成菱形。但是，由于旋转后原始的正方形盒子仍然保持着原来的大小，所以会在旋转后多出一些空白区域。为了解决这个问题，可以通过以下代码来修正：

div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
} 

其中transform-origin用于定义旋转中心的位置。上述样式将旋转中心放在正方形的中心位置，以避免产生空白区域。