Diagonal shape 100% height CSS - html

Question

Alright, here is the thing. This is what I'm trying to accomplish, which I did so far:
The problem is I use hardcoded pixels right now, but it really needs to be more responsive. So it needs a height of 100% (not 200px like now). And the total width of the diagonal and content containers needs to be 50%, like the image above (so not hardcoded 100px like now). The main problem seems to be the diagonal, cause it almost seems I can only use pixels and not percentages. So if the content block gets more content, it will expand, but the diagonal will not, which is a problem.
It looks like a position absolute could fix it, but then I can't really place the content and diagonal blocks next to each other anymore. Now I gave them two different colors to be clear, but in the live example they need to look like one shape with the same background color.
.shape {
width:400px;
margin:0 auto;
display: block;
height: 200px;
position: relative;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.diagonal {
height:0;
border-width: 0px 0 200px 100px;
border-style:solid;
border-color: transparent transparent transparent #d71f55 ;
float: left;
}
.content {
height: 100%;
width: 100px;
background-color: #888;
float: left;
color: #fff;
}
<div class="shape">
<div class="content">
Content goes here
Like this
</div>
<div class="diagonal"></div>
</div>
EDIT:
By the way, I already tried using two backgrounds as well, like:
background-color: #f87f73;
background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
But that really got ugly. Too pixelated.
Edit 2:
Browser which needs to be supported:
OS: windows 8/10 :
** browsers: Chrome 47/48
** Firefox 43/44
** Internet Explorer 11
OS: mac OSX 10.9/10.10
** Chrome 47/48
** Firefox 43/44
** Safari 8/9
OS: android 5/6
** Chrome latest version
OS: iOS 8/9
** Safari latest version

Answer 1

You can use viewport related units for the border as described in Shape with a slanted side (responsive). This will allow you to make the shape 50% width and 100% height of the viewport and responsive:
* {
margin: 0;
padding: 0;
}
.shape {
width: 100%;
margin: 0 auto;
display: block;
height: 100vh;
position: relative;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.diagonal {
height: 0;
border-width: 0 0 100vh 25vw;
border-style: solid;
border-color: transparent transparent transparent #d71f55;
float: left;
}
.content {
height: 100vh;
width: 25vw;
background-color: #888;
float: left;
color: #fff;
}
<div class="shape">
<div class="content">
Content goes here Like this
</div>
<div class="diagonal"></div>
</div>
Viewport related units (vh and vw) have good browser support. For more info, see canIuse

Answer 2

This is probably how I would approach it. Using a hard 50/50 gradient rather than a border makes it pretty trivial. It seems to render ok in chrome but I haven't checked other browsers. If you want this inside a container remember to set the container to position: relative
.shape {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
display: block;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.content {
height: 100%;
width: 25%;
background-color: #888;
color: #fff;
float: left;
}
.diagonal {
height: 100%;
width: 25%;
background: linear-gradient(to bottom right, #888 50%, transparent 50%);
float: left;
border: none;
}
<div class="shape">
<div class="content">
Content goes here Like this
</div>
<div class="diagonal"></div>
</div>