在CSS中，我們可以使用偽類選擇符和CSS3的旋轉變換來畫出菱形。

首先，我們使用偽類選擇符:after或:before來創建一個元素，并使用絕對定位將其定位在要創建菱形的元素上。

.diamond {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
.diamond:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -50px; /* 上下平分距離 */
left: -50px; /* 左右平分距離 */
border: 50px solid transparent;
border-bottom-color: red;
transform: rotate(45deg);
}

在上面的代碼中，我們使用transform:rotate(45deg)旋轉元素，使其變成菱形形狀。

接下來，在:before偽類中，我們使用border屬性來創建邊框。為了將邊框定位到正確的位置，我們使用top和left屬性來水平和垂直平分距離。

最后，我們將border-bottom-color屬性設置為與元素背景顏色相同的顏色，以創建菱形的底部邊框。

現在，我們已經成功地創建了一個美麗的CSS菱形！