css 圆角梯形

/* 创建一个圆角梯形的 CSS 代码 */

.trapezoid {
  width: 200px;
  height: 100px;
  background: #3498db;
  position: relative;
  border-radius: 10px;
}

.trapezoid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid #3498db;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.trapezoid::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #3498db;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

解释说明：

• .trapezoid 是一个矩形，设置了宽度、高度和背景颜色，并且有 border-radius 来创建圆角。
• 使用 ::before 和 ::after 伪元素来创建梯形的左右两侧。通过设置 border 属性，可以创建三角形的效果，然后调整它们的位置使其与主元素连接，形成梯形的形状。
• border-radius 应用于伪元素的边框，以确保圆角效果延伸到梯形的四个角。

你可以将这段代码应用到 HTML 中的某个元素上，例如：

<div class="trapezoid"></div>