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

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

解析：

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

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

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

其中，邊框的樣式包括：

• solid：實(shí)線
• dotted：虛線
• dashed：破折線
• double：雙實(shí)線

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

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

另外需要注意的是，為了讓菱形更加扁平，我們可以給上下兩個(gè)邊框設(shè)置一個(gè)固定的像素值，比如 30px，這樣上下兩個(gè)邊框會(huì)比左右兩個(gè)邊框更長(zhǎng)，從而實(shí)現(xiàn)扁平的效果。

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

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