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

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

这是我所说的形状的一个演示。有没有什么方法可以使用CSS实现，用户可以在以后更改图像或颜色？你认为这里的解决方案是什么

---

提前谢谢。

这实际上是多个问题

亚历山大·博德（Alexandre Beaudet）现在删除的答案，你说“与我想要的不太接近”，实际上明确而简短地回答了第二个问题。你被你想看到的细节蒙蔽了双眼，你需要从答案中学到什么原则

考虑到这些元素是多么容易研究，我甚至不想向您展示示例代码，但这里有一个：

.wrapper{
宽度：100%；
高度：300px；
背景：灰色；
位置：相对位置；
}
.背景形状{
背景：橙色；
宽度：100%；
高度：200px；
-ms变换：歪斜（-20度）；
-webkit变换：歪斜（-20度）；
变换：歪斜（-20度）；
边界半径：30px；
位置：绝对位置；
顶部：0px；
左：50px；
}
.内容{
颜色：白色；
位置：绝对位置；
顶部：120px；
左：30%；
z指数：10；
}

洛雷姆·伊普苏姆英雄

在我将其发布到StackOverflow的那天，我终于解决了这个问题。感谢所有评论过的人。我使用了一个CSS伪元素来创建这个形状

这是我的密码

//标题形状
.具有标题形状{
位置：相对位置；
&：：之前{
位置：绝对位置；
宽度：1350px；
高度：550px；
内容：“；
背景：#0cebb；/*旧浏览器的回退*/
背景：-webkit线性梯度(
对,，
#8cbf86，
#66b4a6，
#408ca3
)；/*铬合金10-25，Safari 5.1-6*/
背景：线性梯度(
对,，
#8cbf86，
#66b4a6，
#408ca3
)；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
z指数：-1；
顶部：0px；
边界半径：60px；
-webkit变换：倾斜（0度，-15度）；
变换：倾斜（0度，-15度）；
左：自动；
右：0；
}
}

希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来并解释您尝试了什么。@Paulie_我不会告诉任何人编写代码。我只是想寻求一个解决方案，想知道解决这个问题的最佳方法是什么。寻求意见。我试着使用CSS边框半径和所有其他类型的东西，但它不符合我的要求。

寻找意见

-->这里不是发表意见的地方。。我们有规则和主题问题。。而这一个是关闭的-topic@TemaniAfif好的，我会记住的。我打算删除这篇文章。非常感谢你的简短回答。我一直在找这个。我想不出解决这个问题的方法。这就是我所要求的过程。非常感谢你。作为一个初学者，我想不出像你这样的解决方案。我正在从错误中学习。