在CSS中，我們可以利用border屬性來實現不同形狀的矩形和菱形。下面我們分別來看一下如何實現這些形狀：

1. 矩形

.rectangle {
height: 100px;
width: 200px;
border: 2px solid black;
}

通過設置height和width屬性來控制矩形的高度和寬度，border屬性設置了邊框的樣式、寬度和顏色，從而實現了一個簡單的矩形。

2. 菱形

.diamond {
height: 0;
width: 0;
border: 50px solid transparent;
border-bottom-color: black;
}

菱形的實現有些細節，需要分步驟來進行。首先，利用border屬性來生成一個等邊三角形，其中邊框的樣式為實線（solid），寬度為50px，顏色為透明（transparent）

border: 50px solid transparent;

然后，通過height和width屬性將三角形的高和寬都設置為零，隱藏掉不需要的部分。

height: 0;
width: 0;

最后，通過border-bottom-color屬性將三角形的底部顏色設置為黑色，這樣就實現了一個菱形。

border-bottom-color: black;

除了以上兩種形狀，CSS還可以通過其他技巧實現更多形狀的圖形，靈活運用這些技巧，可以讓我們在界面布局中更加自如。