菱形是一個(gè)基礎(chǔ)的形狀，在很多設(shè)計(jì)和布局中都有應(yīng)用。在 CSS 中，我們可以用偽元素和變形（transform）屬性來實(shí)現(xiàn)一個(gè)純 CSS 的菱形。

首先，我們需要先創(chuàng)建一個(gè)正方形的區(qū)塊，代碼如下：

.square {
width: 100px;
height: 100px;
background: red;
}

接下來，我們要用偽元素來創(chuàng)建出兩個(gè)三角形，組合成一個(gè)菱形。我們?yōu)檎叫螀^(qū)塊添加position: relative屬性，然后為它的偽元素添加position: absolute屬性。因?yàn)楸亲?Clark Wimberly 獨(dú)創(chuàng)的技巧，我們可以通過nth-child偽類來使 CSS 代碼更簡潔。代碼如下：

.square {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.square::before,
.square::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: red;
}
.square::before {
left: 0;
transform: skew(0deg, 30deg);
transform-origin: left;
}
.square::after {
right: 0;
transform: skew(0deg, -30deg);
transform-origin: right;
}

偽元素的::before和::after分別代表正方形的左側(cè)和右側(cè)區(qū)塊。它們的content: ''屬性空白表示生成一個(gè)空白內(nèi)容的元素。

接下來，我們需要將這兩個(gè)偽元素變形成三角形，這里用到transform屬性來實(shí)現(xiàn)。將transform: skew(0deg, 30deg)作用于左側(cè)偽元素，它會(huì)將其左上和右下的兩個(gè)角度往左上和右下分別偏移 30 度，使其變形成一個(gè)三角形。同理，右側(cè)偽元素用transform: skew(0deg, -30deg)即可變形另一個(gè)三角形。

最后，我們還需要對偽元素進(jìn)行對齊調(diào)整，這里采用transform-origin屬性，將其分別設(shè)置為左側(cè)和右側(cè)，即可擺正兩個(gè)三角形，呈現(xiàn)出完整的菱形形狀。

至此，我們就通過 CSS 成功創(chuàng)建了一個(gè)純 CSS 的菱形！你可以將這個(gè)菱形集成到你自己的網(wǎng)站設(shè)計(jì)和布局中，讓你的頁面更加生動(dòng)有趣。