CSS Slanted Background (not full width / a bit different)

Question

I've done a simple website design and now I want to practice my coding skills to make it alive. But it seems I am a bit newbie.

This is the background I want to accomplish and after a lot of research, this is the best I can get (disappointing)..

Now, the question.. is it possible to develop it with plain CSS? (And few recommandations maybe?)

Any helpful answer will be appreciated!

Thanks!

EDIT: Here is the code. (Sorry, forgot about it)

HTML

<section id="hero">
  <div class="bg"></div>
</section>

CSS

#hero .bg {
    background: #8c57d1; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #8c57d1 0%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 90%;
    position: absolute;
    box-sizing: border-box;
    border-bottom-right-radius: 200px;
    padding: 55vh 0px;
}

#hero .bg:after {
    content: "";
    bottom: 0;
    position: absolute;
    left: 0;
    height: 0;
    width: 0;
    border-color: transparent transparent #FFFFFF transparent;
    border-style: solid;
    border-width: 0 0 20vw 90vw;
}

Answer 1

This is the closest I could get to that image. I hope, this helps.

#hero .bg {
    background: #8c57d1; /* Old browsers */
    background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 90%;
    position: absolute;
    left:-60px;
    top:-10px;
    box-sizing: border-box;
    border-bottom-right-radius: 20px;
    padding: 50vh 0px;
    -ms-transform: skew(-10deg,0deg);
    -webkit-transform: skew(-10deg,0deg);
    transform: skew(-10deg,0deg);
}

#hero .bg:after {
    content: "";
    bottom: 0;
    position: absolute;
    left: 0;
    height: 0;
    width: 0;
    border-color: transparent transparent #FFFFFF transparent;
    border-style: solid;
    border-width: 0 0 15vw 100vw;
}
	

<section id="hero">
  <div class="bg"></div>
</section>

Here's another:

#hero .bg {
  background: #8c57d1;
  /* Old browsers */
  background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  width: 95%;
  position: absolute;
  left: -60px;
  top: -100px;
  box-sizing: border-box;
  border-bottom-right-radius: 20px;
  padding: 50vh 0px;
  -ms-transform: skew(-10deg, 0deg);
  -webkit-transform: skew(-10deg, 0deg);
  transform: skew(-10deg, -9deg);
}

<section id="hero">
  <div class="bg"></div>
</section>