Trying to make a polygon responsive in DIV

Question

I've been searching for hours but I can't seem to find a fix for my problem, I want to make a triangle which is responsive to the DIV it is in, it also has to have the full width of the div. The div has position relative but no matter what I try, the polygon always seems to overflow the div or get out of place.

Eventually the responsive polygon has to go above the 'something' button, but let's first try to fix the current problem.

Recap: the triangle needs to be responsive with the main div as it changes size without overflowing or getting a different shape, the triangle has to be 100% the width of the div.

JSfiddle: https://jsfiddle.net/L8gv17c2/1/

HTML:

    <div class="row events">
    <div class="onebyone">
        <div class="onebytext">
            <div class="textInfo">Test</div>
        </div>
            <div class="triangle">
                <svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
                    <polyline fill="#CC0000" points="0,0 0,200 300,0"/>
                </svg>
            </div>
            <div class="onebysign">
                <button class="submitBtn">Something</button>
            </div>
        </div>
        </div>

CSS:

    body{
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      background-color:#f2f2f2;
    }
    .events{
      padding:20px 100px;
    }
    .textInfo{
      text-transform: uppercase;
      font-weight: 600;
      color:#085DAD;
      padding:10px;
      background-color:white;
    }
    .onebyone {
      background-color: grey;
      width: 100%;
      padding-top: 100%; /* 1:1 Aspect Ratio */
      position: relative; /* If you want text inside of it */
      background-size:cover;
    }
    .onebytext{
      position:  absolute;
      top: 10px;
      left: 0;
      bottom: 0;
      right: 0;
      text-align: center;
        font-size:32px;
      color: white;
      width:90%;
      left:5%;
    }
    .onebysign{
      position:  absolute;
      left: 0;
      bottom: 0px;
      right: 0;
      text-align: center;
      font-size: 20px;
      background-color:white;
        font-size:24px;
    }
    .onebytext, .onebysign{
      position:  absolute;
      text-align: center;
      color: white;
    }
    .submitBtn{
      background-color:#0099CC;
      text-transform: uppercase;
      padding:10px;
      border-radius: 50px;
      border:0px;
      width:70%;
      margin:10px 0;

    }
    .triangle {
      width: 100%;
      height: 4px;
      position: absolute;
      left: 0;
      top: 0;
    }

Answer 1

I assume you're looking for this:

.triangle {
  width: 40%;
}

.triangle svg {
  width: 100%;
  height: auto;
}

Updated fiddle: https://jsfiddle.net/L8gv17c2/3/

Simply change the width of the parent to adjust the width of the <svg> (responsively): https://jsfiddle.net/L8gv17c2/4/