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

#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; 
 
}

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