在网页设计中，我们经常需要使用矩形和梯形，这些图形可以让网页看起来更加美观。在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属性，我们可以非常方便地画出矩形和梯形，这样可以让网页更加美观和有吸引力。希望本文能对你有所帮助。