Html 创建反应灵敏的形状

我希望创建一个反应灵敏的梯形形状，如下图所示：

---

在HTML和CSS中构建类似内容的最佳方法是什么？

我认为最好的方法是使用矢量图像。 我是这样想的：

梯形
img{
宽度：50%；
}

实现您希望重新创建的效果的一种CSS方法是使用：

• ：：在

  伪元素之后
• 应用了

  skew

  CSS变换

---

工作示例：

div{
位置：相对位置；
边缘顶部：20px；
宽度：240px；
高度：100px；
背景色：rgb（253、114、76）；
边界半径：12px；
盒影：0 2px2pRGBA（190,60,28,0.7）；
}
div：：之后{
内容：''；
位置：绝对位置；
显示：块；
排名：0；
左：0；
宽度：100%；
高度：24px；
背景色：rgb（253、114、76）；
边界半径：12px 12px 0；
变换：歪斜（-3deg）平移（-8px）；
}

---

非常感谢，但它是否响应？是的，您可以直接使用

%

和

vw

，

vh

，

vmin

和

vmax

单位为该元素提供响应性

宽度
，
高度
，
填充
和
边距
。