CSS：如何创建响应性不规则形状

我用css创建了一个不规则的形状。 现在，我的问题是：我如何才能创造出同样的形状，但又能做出响应

以下是链接：

#myForm{
最大宽度：100%；
宽度：800px；
高度：300px；
位置：相对位置；
背景色：#A0；
颜色：#fff；
字号：2.4em；
字号：700；
}
#myForm跨度{
显示：内联块；
垂直对齐：中间对齐；
}
#myForm:：之前{
内容：''；
位置：绝对位置；
底部：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 120px 800px；
边框颜色：透明透明#fff透明；
}
#myForm:：之后{
内容：''；
位置：绝对位置；
右：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 80px 300px 0；
边框颜色：透明#fff透明；
}

---

使用百分比渐变。提供小提琴。你所做的只是一个长方形？这是一个不规则的形状吗？嗨，我添加了一个小提琴链接而不是800px为什么你不试试80%或90%呢？或者使用calc设置像素suse:max width:100%；用途：最大宽度：100%；或@media-only屏幕和（最大宽度：800px）{}

     #myForm{
 width: 800px;
height: 300px;
position: relative;
 background-color: #A0A0A0;
     color: #fff;
     font-size: 2.4em;
  font-weight: 700;

}  

...and so on