在CSS中，菱形屬于比較特殊的圖形，很多人不知道該怎么去寫出一個完美的菱形。下面，我們來一起學習如何用CSS寫出一個漂亮的菱形。

.diamond {
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: #000;
margin: 20px;
position: relative;
}
.diamond:before {
content: '';
position: absolute;
top: -50px;
left: 0;
width: 0;
height: 0;
border-bottom: 50px solid #000;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.diamond:after {
content: '';
position: absolute;
bottom: -50px;
left: 0;
width: 0;
height: 0;
border-top: 50px solid #000;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}

首先，我們定義一個名為diamond的CSS類，它的寬度和高度都為100像素，并且通過rotate屬性將它旋轉了45度。這樣就可以得到一個會變形的正方形。

接下來，我們使用:before和:after偽元素來模擬一個菱形。在這里，我們使用border來繪制一個三角形，并將它的其中一條邊設置為透明，這樣就能得到一個菱形了。

最后，將diamond類的position屬性設置為相對定位，這樣偽元素的位置就可以相對于diamond類的位置來定位了。我們把:before偽元素重新定位到diamond類的頂部，并且把:after偽元素定位到diamond類的底部，就完成了菱形的制作。

這就是用CSS實現菱形的方法，通過靈活運用偽元素和CSS屬性，我們可以輕松地制作出各種形狀的圖形。