html - CSS 倾斜背景(不是全宽/有点不同)

Question

我已经完成了一个简单的网站设计，现在我想练习我的编码技能，让它活起来。但我似乎有点新手。

This是我想要完成的背景，经过大量研究，this是我能得到的最好的(令人失望)..

现在，问题是……是否可以使用纯 CSS 来开发它？ (也许很少有推荐？)

任何有帮助的答案将不胜感激!

谢谢!

编辑:这是代码。 (抱歉，忘记了)

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

这是我能得到的最接近该图像的图像。我希望这会有所帮助。

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

还有一个:

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