我如何使用 CSS 和 HTML 创建复杂的背景形状（在说明中添加示例图像）

Question

我正在开发一个项目，该项目具有自定义形状背景和其上的图像。它位于着陆页的英雄区域。我需要一个好的解决方案，以便自定义形状位于背景中。用户可以根据需要更改图像或颜色。

这是我正在谈论的形状的演示。有什么方法可以使用 CSS 实现它，并且用户可以稍后更改图像或颜色？您认为这里的解决方案如何？

提前致谢。

Answer 1

这其实是多道题。

How can I layer multiple elements over each other.
How can I change the shape of an html element.

你说的 Alexandre Beaudet 现在被删除的答案是 'Not really close to what I wanted'，实际上确实清楚而简短地回答了第二个问题。你被你想看到的细节蒙蔽了双眼，看不到你需要从那个答案中学到的原则。

鉴于这些元素很容易研究，我什至不想向您展示示例代码，但这里有一个：

.wrapper {
  width: 100%;
  height: 300px;
  background: gray;
  position: relative;
}
.background-shape {
  background: orange;
  width: 100%;
  height: 200px;
  -ms-transform: skewY(-20deg);
  -webkit-transform: skewY(-20deg);
  transform: skewY(-20deg);
  border-radius: 30px;
  position: absolute;
  top: 0px;
  left: 50px;
}
.content {
  color: white;
  position: absolute;
  top: 120px;
  left: 30%;
  z-index: 10;
}

<div class="wrapper">
  <div class="content">
    Lorem Ipsum Hero
  </div>
  <div class="background-shape">
  </div>
</div>

这是示例代码。SO 不是复制粘贴解决方案站点。它在这里教给您以前不知道的用于解决特定问题的特定机制。碰巧的是，代码片段可能是以简洁明了的方式解释事物的最佳方式之一。

要在您的网站上实施此功能，您需要投入大量工作来定位和塑造所有内容，使其在所有设备上看起来都不错。

Answer 2

在我将问题发布到 Whosebug 的那天，我终于能够解决这个问题。感谢所有发表评论的人。我使用了一个 CSS 伪元素来制作这个形状。

这是我的代码。

// Header Shape
.has-header-shape {
  position: relative;
  &::before {
    position: absolute;
    width: 1350px;
    height: 550px;
    content: "";
    background: #0cebeb; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #8cbf86,
      #66b4a6,
      #408ca3
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #8cbf86,
      #66b4a6,
      #408ca3
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    z-index: -1;
    top: 0px;
    border-radius: 60px;
    -webkit-transform: skew(0deg, -15deg);
    transform: skew(0deg, -15deg);
    left: auto;
    right: 0;
  }
}

我如何使用 CSS 和 HTML 创建复杂的背景形状（在说明中添加示例图像）

How can i create complex background shape using CSS and HTML ( Example image added in the description )

html

css

svg

css-shapes