前言：

在網頁設計中，經常會需要使用各種形狀的圖形來進行裝飾，
其中菱形也是一種比較常見的圖形之一。如何用 CSS 制作一個簡單的菱形呢？

實現方法：

首先，我們可以使用 transform 屬性來將正方形旋轉 45 度。
然后再調整它的寬度和高度即可。

.diamond {
width: 100px;
height: 100px;
background-color: #f00;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.diamond-container {
width: 100px;
height: 100px;
margin: 50px auto;
}

實現解析：

首先，我們創建了一個類名為 .diamond 的 div 元素，設置寬度和高度均為 100px，背景顏色為 #f00 ，就是一個正方形了。
接著，我們使用 transform 屬性，對它進行旋轉 45 度，它便成為了菱形。
但此時菱形卻變形了，因為我們使用了 transform 屬性，它的寬度和高度也隨之變化了。
為了讓它保持原有的大小，我們需要再將它的寬度和高度設置為 100px（正方形的大小）。
最后，我們需要將它的父級元素 .diamond-container 的寬度和高度也設置為 100px，然后將其 margin 設置為 auto，即可居中顯示。

總結：

通過 CSS 中的 transform 屬性，我們很簡單地就可以制作出一個漂亮的菱形。
同時，也可以通過操作它的寬度、高度和內邊距等屬性，對菱形進行美化和調整。