Html 我想定位一个css三角形作为背景

我想构建以下布局：

更可取的是，我只想使用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;
}

#html
Das ist ein测试
副标题
#css
.包装纸{
填充顶部：100px；
文本对齐：居中；
宽度：100%；
背景色：#4D；
高度：400px；
颜色：#fff；
位置：相对位置；
}
.包装工：以前{
身高：50%；
宽度：100%；
位置：相对位置；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
变换：旋转（45度）；
内容：''；
显示：块；
位置：绝对位置；
排名：0；
背景色：#3d3D；
}

但这不起作用，我自己也弄不明白

---

谢谢你的帮助

试试这个，但仍需要对响应部分进行一些处理

.box{
位置：相对位置；
宽度：100%；
最大宽度：600px；
背景：#ccc；
最小高度：300px；
}
.盒子：以前{
宽度：0；
身高：0；
内容：“；
位置：绝对位置；
z指数：0；
排名：0；
左：0；
左边框：300px实心透明；
右边框：300px实心透明；
边框顶部：180px实心#555；
}
.box.content{
z指数：10；
位置：相对位置；
颜色：#fff；
文本对齐：居中；
填充顶部：40px；
}
h1，h2{
保证金：0；
填充：0；
}
氢{
边缘底部：80px；
}
.btn{
背景：#f00；
颜色：#fff；
显示：内联块；
填充物：5px10px；
文本对齐：居中；
文字装饰：无；
最小宽度：200px；
字体大小：20px；
}

大字标题
大字标题

这应该可以让您接近，并说明了一种仅使用CSS的方法：

*{
保证金：0；
填充：0
}
身体{
背景：#ccc；
最小高度：500px；
}
div{
宽度：0；
身高：0；
保证金：0px自动；
边框：200px实心透明；
边框顶部颜色：灰色；
}
a{
显示：块；
背景：蓝色；
颜色：白色；
填充物：5px10px；
宽度：200px；
保证金：0px自动；
位置：相对位置；
顶部：-200px；
文本对齐：居中；
文字装饰：无；
}

---

您可以在较暗的背景上设置2个灯光渐变

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

div{
宽度：400px；
高度：200px；
边框：实心1px绿色；
背景：线性渐变（左上角，浅绿色50%，透明50%），
线性渐变（右上角，浅绿色50%，透明50%），绿色；
}

---

谢谢，但这不是我的布局的解决方案。我想把盒子的边缘和三角形对齐。我不认为这是完全正确的，但通过一些媒体询问和一点努力，它会让你达到目的：）谢谢。这是一个很好的起点。正如你所说。现在，这必须是响应性的。我将以此为基础来尝试解决它。谢谢！！这正是我需要的！很高兴它帮助了你