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

如何用 css 绘制带外边框的等腰梯形

本文介绍了一种使用 css clip-path 属性绘制带有外边框等腰梯形的简单方法。这种方法的原理是绘制两个略有不同的梯形，一个较小，叠加在另一个上面。

以下是实现此效果的 css 代码：

.test2 {
  width: 115px;

  height: 230px;

  position: relative;

  top: -4px;

  background: #4FA6E5;

  border-bottom: 1px solid #4FA6E5;

  clip-path:polygon(0 55px, 100% 0,100% 100%,0 calc(100% - 55px));

  box-sizing: border-box;
}
.test2:after{
  content:'';
  padding: 0;
  display:block;
  width: 100%;

  height: 100%;

  box-sizing: border-box;

  background: #082F4C;

  clip-path:polygon(2px 57px, 100% 2px,100% calc(100% - 2px),2px calc(100% - 57px));
  
}

这个代码的作用是：

1. 创建一个外层元素 .test2，它将作为梯形的基础。
2. 为 .test2 创建一个内层元素 :after，它将是嵌套的梯形。
3. 使用 clip-path 属性为两个元素定义梯形形状。
4. 通过设置背景色和 border-bottom 属性，为外层元素添加外边框。

以下是这个效果的示例演示：

[图片：带外边框的等腰梯形]

效果演示：

[附上演示链接]