Responsive CSS triangle that resizes according to its parent

Question

I am trying to build a CSS triangle that resizes itself according to the width of the parent.

Currently I have given custom size for the triangle I have created so that on resizing, the triangle starts to come outside of the parent. But I need the triangle to stay inside the parent on resizing but take full width. Please help. Thank you.

Here is my HTML and CSS.

.triangle-container{
  width:50%;
  height:200px;
  background-color: #000000;
}
.triangle{
  width:0;
  height:0;
  border-left:167px solid rgba(0,0,0,0);
  border-right:167px solid rgba(0,0,0,0);
  border-top:100px solid red;
}

<div class="triangle-container">
  <div class="triangle"></div>
</div>

Answer 1

One posibility: use a multiple background to create the triangle. The element is set to take half the height of the parent, and the full width

.triangle-container{
  width:50%;
  height:200px;
  background-color: #000000;
}
.triangle{
  width:100%;
  height:50%;
  background-image: linear-gradient(to top right, transparent 50%, red 50%),
    linear-gradient(to top left, transparent 50%, red 50%);
  background-size: 50.2% 100%;
  background-repeat: no-repeat;
  background-position: top left, top right;
}

<div class="triangle-container">
  <div class="triangle"></div>
</div>