要使用CSS绘制一个带有外层边框的等腰梯形，你可以使用clip-path属性来裁剪元素，使其呈现梯形的形状。然后，你可以通过伪元素（如::before或::after）来添加外层边框。
以下是一个示例代码，展示了如何实现这个效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>等腰梯形</title>
<style>
.trapezoid {
position: relative;
width: 200px;
height: 100px;
background-color: #4CAF50;
clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}
.trapezoid::before {
content: '';
position: absolute;
top: -5px; /* 边框宽度 */
left: -5px; /* 边框宽度 */
width: calc(100% + 10px); /* 边框宽度 * 2 */
height: calc(100% + 10px); /* 边框宽度 * 2 */
background-color: transparent;
border: 5px solid #000; /* 边框颜色和宽度 */
clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
z-index: -1;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>
.trapezoid:
width 和 height 定义了梯形的基本尺寸。background-color 设置了梯形的背景颜色。clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); 使用多边形裁剪路径来创建等腰梯形的形状。25% 0% 和 75% 0% 定义了梯形的上边，100% 100% 和 0% 100% 定义了梯形的下边。.trapezoid::before:
::before 来创建外层边框。top 和 left 设置为负值，以便伪元素比主元素稍大。width 和 height 使用 calc() 函数来增加尺寸，以容纳边框。border 设置了边框的颜色和宽度。clip-path 使用与主元素相同的多边形路径，以确保边框的形状与梯形一致。z-index: -1 将伪元素放在主元素后面，确保边框显示在主元素的外围。这段代码将创建一个带有黑色边框的绿色等腰梯形。你可以通过调整 clip-path 的数值来改变梯形的形状，或者通过修改 border 和 background-color 来改变边框和梯形的颜色。