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>

CSS倾斜背景（不是全宽/有点不同）

1 个答案: