html - HTML CSS 自定义一个带有边框半径属性的框

Question

我想用 CSS & HTML 自定义这个形状。它是相同的梯形，具有一些倒置的边界半径。我如何自定义它？这是这样的图像。

提前谢谢你！

标签： htmlcss

Answer 1

这将帮助您理解 CSS 的梯形形状。

#trapezoid {
  position: relative;
  background: red;
  width: 20vw;
  height: 12vw;
  margin: 8vw 0;
}
#trapezoid:before,
#trapezoid:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: 100% 0;
  transform: skewY(-20deg);
}
#trapezoid:before {
  transform: skewY(20deg);
}

<div id="trapezoid"></div>

The Shapes of CSS

CSS transform