I want to position a css triangle as a background - html

Question

I want to build the following layout:
Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed.
The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too.
What i tried:
# 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;
}
But this does not work and i can't figure it out on my own.
Thank you for your help!

Answer 1

You can set 2 light gradients on top of the darker background.
They overlap each other and leave only the remaining triangle darker
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>

Answer 2

Try this one, but still need some work on the responsive part.
.box{
position: relative;
width: 100%;
max-width: 600px;
background: #ccc;
min-height: 300px;
}
.box:before {
width: 0;
height: 0;
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 180px solid #555;
}
.box .content{
z-index: 10;
position: relative;
color: #fff;
text-align: center;
padding-top: 40px;
}
h1, h2{
margin: 0;
padding: 0;
}
h2{
margin-bottom: 80px;
}
.btn{
background: #f00;
color: #fff;
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
min-width: 200px;
font-size: 20px;
}
<div class="box">
<div class="content">
<h1>Headline</h1>
<h2>Headline</h2>
CTA
</div><!--// end .content -->
</div><!--// end .box -->

Answer 3

This should get you close, and illustrates a CSS only approach:
* {
margin: 0;
padding: 0
}
body {
background: #ccc;
min-height: 500px;
}
div {
width: 0;
height: 0;
margin: 0px auto;
border: 200px solid transparent;
border-top-color: grey;
}
a {
display: block;
background: blue;
color: white;
padding: 5px 10px;
width: 200px;
margin: 0px auto;
position: relative;
top: -200px;
text-align: center;
text-decoration: none;
}
<div></div>
link