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

Question

我使用css创建了一个不规则的形状。 现在，我的问题是：我如何创建相同的形状，但响应迅速。

这是链接：
https://jsfiddle.net/jobgaraux/rpfg64vq/

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

}  

...and so on   

Answer 1

＆＃13;

＆＃13;

#myForm{
  max-width: 100%;
  width: 800px;
  height: 300px;
  position: relative;
  background-color: #A0A0A0;
  color: #fff;
  font-size: 2.4em;
  font-weight: 700;      
}
     
          #myForm span{
   display:inline-block;
           vertical-align: middle;
}
  
     
     
     
 

#myForm::before{
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 120px 800px;
  border-color: transparent transparent #fff transparent;
}

#myForm::after{
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 300px 0;
  border-color: transparent #fff transparent transparent;
}

＆＃13;

<div id="myForm"></div>

＆＃13;

＆＃13;

＆＃13;