Daniel Daniel - 2 months ago 27
CSS Question

CSS: how to create responsive irregular shapes

I have created an irregular shape using css.
Now, my question is: how can I create the same shape, but responsive.

Here is the link:

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

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