create a slanted edge #css

slanted-edge.css

#hero {
  background: #834d9b; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #d04ed6,
    #834d9b
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #d04ed6,
    #834d9b
  ); /* W3C, IE 10+/ Edge, Firefox 16+*/
  position: relative;
  z-index: 1;
  border: 1px dashed
}

#hero:after{
  content:"";
  display:block;
  background:inherit;
  z-index:-1;
  height:50%;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  transform:skewY(-1.5deg);
  transform-origin:100%;
}