如何使用 CSS 制作扁平菱形？

.diamond {
width: 0;
height: 0;
border: 30px solid transparent; //上下各留 30 像素的空白
border-top-color: #3498db; //上邊框為藍色
border-bottom-color: #3498db; //下邊框也為藍色
}

解析：

首先，要想制作扁平的菱形，我們需要了解一些 CSS 基礎知識。

在 CSS 中，我們可以使用 border 屬性來設置一個元素的上下左右邊框的樣式、顏色和寬度。

border: [寬度] [樣式] [顏色];

其中，邊框的樣式包括：

• solid：實線
• dotted：虛線
• dashed：破折線
• double：雙實線

為了制作一個扁平的菱形，我們需要把元素的寬度和高度都設為 0，然后設置上下兩個邊框的顏色為藍色，左右兩個邊框的顏色為透明（transparent）。

border: [寬度] [樣式] [顏色];
border-top-color: 藍色;
border-bottom-color: 藍色;
border-left-color: 透明;
border-right-color: 透明;

另外需要注意的是，為了讓菱形更加扁平，我們可以給上下兩個邊框設置一個固定的像素值，比如 30px，這樣上下兩個邊框會比左右兩個邊框更長，從而實現扁平的效果。

border: 30px solid transparent;
border-top-color: #3498db;
border-bottom-color: #3498db;

這樣，我們就成功地用 CSS 制作出一個扁平的菱形了。