Flatten a Responsive CSS3 Triangle - css

Question

I've created a responsive CSS3 triangle using the following guide.
GUIDE
The problem I now face is that I want to decrease its height. So it's not a 90-degree triangle but rather, I want to adjust its height to for example 30 pixels whilst maintaining a skewed triangle shape as well as it's responsiveness.
Here is what I have so far:
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: rotate(45deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
I tried experimenting with the perspective transform but with no luck.

Answer 1

You can scale the element to whatever ratio you want. I've compressed the triangle in my code by 2. Just use transform: scale(1, 0.5) rotate(45deg);
Note: The order of transformations will do matter. The result of
transform: rotate(45deg) scale(1, 0.5); is different from transform: scale(1, 0.5) rotate(45deg);
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: scale(1, 0.5) rotate(45deg)
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>

Answer 2

Answer by spooky daimon is way more intuitive, go for that one. Just to show the possibilities, you can also skew the pseudo element and adapt rotation as well as translation.
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: translate(25%) rotate(30deg) skew(-30deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>