如何用CSS绘制一个带有外层边框的等腰梯形？

要使用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>

代码解释：

1. .trapezoid:

   • width 和 height 定义了梯形的基本尺寸。
   • background-color 设置了梯形的背景颜色。
   • clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); 使用多边形裁剪路径来创建等腰梯形的形状。25% 0% 和 75% 0% 定义了梯形的上边，100% 100% 和 0% 100% 定义了梯形的下边。

2. .trapezoid::before:

   • 使用伪元素 ::before 来创建外层边框。
   • top 和 left 设置为负值，以便伪元素比主元素稍大。
   • width 和 height 使用 calc() 函数来增加尺寸，以容纳边框。
   • border 设置了边框的颜色和宽度。
   • clip-path 使用与主元素相同的多边形路径，以确保边框的形状与梯形一致。
   • z-index: -1 将伪元素放在主元素后面，确保边框显示在主元素的外围。

结果：

这段代码将创建一个带有黑色边框的绿色等腰梯形。你可以通过调整 clip-path 的数值来改变梯形的形状，或者通过修改 border 和 background-color 来改变边框和梯形的颜色。