CSS 扭曲一個正方形是一種很酷的效果，可以用于網(wǎng)站的裝飾或者頁面展示中。下面我們來一步步地實現(xiàn)這個效果。

.square {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
}
.square:before {
content: "";
position: absolute;
top: 20%;
left: 10%;
width: 80%;
height: 80%;
background-color: #999;
transform: skewY(-20deg) rotate(-10deg);
}
.square:after {
content: "";
position: absolute;
bottom: 20%;
right: 10%;
width: 80%;
height: 80%;
background-color: #999;
transform: skewY(20deg) rotate(10deg);
}

首先我們需要一個正方形的容器，可以通過設置寬度和高度相等來實現(xiàn)。接下來，在容器的:before 偽元素和 :after 偽元素中分別創(chuàng)建傾斜的矩形，并且進行旋轉來實現(xiàn)扭曲的效果。

其中，skewY(angle) 用于設置元素上下傾斜的角度，angle 為角度值，可以是正數(shù)或負數(shù)；rotate(angle) 用于設置元素旋轉的角度，angle 也為角度值，可以是正數(shù)或負數(shù)。

通過對容器和偽元素的絕對定位，我們可以將它們疊加在一起形成一個扭曲的正方形。這個效果可以通過加入其他的 CSS 樣式來進一步美化和定制化。