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

.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);
}

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

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

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