我想放置一个 css 三角形作为背景

Question

我想构建以下布局：

最好我只想为此使用 css。但即使有背景图像，我也不知道如何构建它。我在网上搜索，但没有找到我需要的帮助。

布局包含一个带有一些文本的 div。背景颜色是浅灰色。然后我想添加一个较暗的三角形背景，如图所示。这也应该作为响应式布局。

我试过的：

# html
<div class="wrapper">
    <h1>Das ist ein test</h1>
    <h2>subheadline</h2>
</div>

#css
.wrapper {
  padding-top: 100px;
  text-align: center;
  width: 100%;
  background-color: #4d4d4d;
  height: 400px;
  color: #fff;
  position: relative;
}
.wrapper:before{
  height: 50%;
  width:100%;
  position:relative;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  content:'';
  display:block;
  position:absolute;
  top: 0;
  background-color: #3d3d3d;
}

但这不起作用，我无法自己弄清楚。

感谢您的帮助！

Answer 1

您可以在较暗的背景之上设置 2 个浅色渐变。

它们相互重叠，只留下剩余的三角形更暗

div {
    width: 400px;
    height: 200px;
    border: solid 1px green;
    background: linear-gradient(to top left, lightgreen 50%, transparent 50%),
    linear-gradient(to top right, lightgreen 50%, transparent 50%), green;
}

<div></div>