在CSS中，將正方形扭曲成菱形是一個相對復(fù)雜的過程，需要利用CSS的變形和過渡屬性，以下是一種實(shí)現(xiàn)方法：

1、定義正方形：你需要一個正方形，可以使用HTML和CSS來創(chuàng)建它。

<div class="square"></div>

.square {
  width: 100px;
  height: 100px;
  background-color: #000;
}

2、應(yīng)用變形：使用CSS的transform屬性來扭曲正方形，可以使用rotate函數(shù)來旋轉(zhuǎn)正方形，并使用skew函數(shù)來傾斜它。

.square {
  transform: rotate(45deg) skew(20deg);
}

3、調(diào)整過渡：為了使扭曲過程更加平滑，可以使用CSS的transition屬性來添加過渡效果。

.square {
  transition: transform 2s;
}

4、觸發(fā)扭曲：你需要一個方法來觸發(fā)正方形的扭曲，可以使用JavaScript來實(shí)現(xiàn)這一點(diǎn)。

document.querySelector('.square').style.transform = 'rotate(45deg) skew(20deg)';