在网页设计中，经常需要使用一些图形来装饰页面或者展示数据。使用CSS可以轻松的完成这些图形的绘制和样式的控制。

/* 1. 矩形 */
.rect {
width: 100px; /* 设置宽度 */
height: 50px; /* 设置高度 */
background-color: #f00; /* 设置背景色 */
border: 1px solid #000; /* 设置边框 */
}
/* 2. 圆形 */
.circle {
width: 50px; /* 设置宽度 */
height: 50px; /* 设置高度 */
border-radius: 50%; /* 设置为圆形 */
background-color: #00f; /* 设置背景色 */
border: 1px solid #000; /* 设置边框 */
}
/* 3. 三角形 */
.triangle {
width: 0;
height: 0;
border-top: 50px solid #0f0; /* 设置顶边宽度和颜色 */
border-left: 25px solid transparent; /* 设置左边宽度和颜色 */
border-right: 25px solid transparent; /* 设置右边宽度和颜色 */
}
/* 4. 梯形 */
.trapezoid {
width: 100px; /* 设置上下底宽度 */
height: 50px; /* 设置高度 */
border-top: 0; /* 上边框为0 */
border-left: 25px solid transparent; /* 设置左边宽度和颜色 */
border-right: 25px solid transparent; /* 设置右边宽度和颜色 */
border-bottom: 50px solid #ff0; /* 设置下边框宽度和颜色 */
}
/* 5. 菱形 */
.diamond {
width: 50px; /* 设置宽度 */
height: 50px; /* 设置高度 */
transform: rotate(45deg); /* 旋转45度 */
background-color: #f0f; /* 设置背景色 */
border: 1px solid #000; /* 设置边框 */
}

以上就是常见的CSS图形绘制方法，根据不同的需求和场景可以灵活的应用。