CSS梯形圖是前端開發中常用的效果之一，可以用來進行排版與圖形展示。今天我們來學習如何使用 CSS 畫出梯形圖，并添加點狀圖案。

首先，我們需要了解梯形圖的基本結構。一個梯形由兩個四邊形組成，其頂部和底部邊緣不平行，如下所示：

.trapezoid {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 50px;
}

在上面的代碼中，我們設置了一個名為.trapezoid的類，它擁有一個寬度為50像素、頂部無邊框、邊底為50個像素、左、右邊框寬度為25像素的形狀。此時，在您的瀏覽器中查看這個例子會發現，現在是一個普通的梯形，下一步我們可以將其更改為加點梯形。

.trapezoid {
position: relative;
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 50px;
&::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #C9F227;
z-index: -1;
}
&::after {
content: '';
position: absolute;
bottom: -20px;
right: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #C9F227;
z-index: -1;
}
}

在上面的代碼中，我們添加了兩個偽元素::before和::after，作為梯形的左邊和右邊的點狀圖案。這兩個偽元素是由寬度為0的三角形組成的，頂點對齊了梯形的邊緣，并用顏色#C9F227 填充。bottom: -20px 和 right: -20px 屬性會使其點狀圖案與梯形的底部和右側邊緣對齊。

以上就是如何使用 CSS 畫出點狀梯形圖的方法。請根據自己的需要對梯形和點狀圖案進行樣式調整，以實現您想要的效果。