在網頁設計中，我們經常需要使用矩形和梯形，這些圖形可以讓網頁看起來更加美觀。在CSS中，我們可以使用嵌套的div元素來實現這些圖形，下面我們來詳細介紹一下。

首先，我們來看如何使用CSS畫一個嵌套矩形。我們需要創建兩個div元素，一個作為外層容器，一個作為嵌套元素，如下所示：

<div class="wrapper">
<div class="nested"></div>
</div>

這里我們設置外層div的class為wrapper，嵌套div的class為nested。接下來，我們需要為這兩個div設置樣式：

.wrapper {
width: 300px;
height: 200px;
background-color: #ccc;
position: relative;
}
.nested {
width: 200px;
height: 100px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在外層div中，我們設置了寬度為300px，高度為200px，背景顏色為#ccc，定位為相對位置。在嵌套div中，我們設置了寬度為200px，高度為100px，背景顏色為#fff，定位為絕對位置，同時使用了transform屬性使其居中顯示。

接下來，我們來看如何使用CSS畫嵌套梯形。同樣需要創建兩個div元素，一個外層容器，一個嵌套元素：

<div class="wrapper">
<div class="nested"></div>
</div>

我們同樣設置了外層div的class為wrapper，嵌套div的class為nested。接下來，我們需要為這兩個div設置樣式：

.wrapper {
width: 200px;
height: 100px;
background-color: #ccc;
position: relative;
overflow: hidden;
}
.nested {
width: 150%;
height: 150%;
background-color: #fff;
position: absolute;
top: -50%;
left: -25%;
transform: skewX(-30deg);
}

在外層div中，我們設置了寬度為200px，高度為100px，背景顏色為#ccc，定位為相對位置，并且使用了overflow:hidden屬性。在嵌套div中，我們設置了寬度為150%，高度為150%，背景顏色為#fff，定位為絕對位置，同時利用transform:skewX(-30deg)函數使其傾斜。由于嵌套div的高度和寬度都比外層div要大，因此我們需要將它向左上角平移一定的距離，以使其完全填滿外層div。

通過CSS的嵌套和transform屬性，我們可以非常方便地畫出矩形和梯形，這樣可以讓網頁更加美觀和有吸引力。希望本文能對你有所幫助。