Align polygon triangle to bottom of div - html

Question

I have a triangle polygon but there is a problem, I want to place it right above the 'onebysign' div but positioning is not working, it also has to stay responsive so when I change the screen size the polygon stays at his place.
So basically: I want the polygon triangle div to 'connect' with the 'onebysign' (something) div, it has to stay responsive and not move when the screen width is changed.
JSfiddle: https://jsfiddle.net/fmg6orkd/
HTML and 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: red;
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%;
position: absolute;
left: 0px;
top: 0px;
}
svg {
width: 100%;
height: auto;
}
<div class="row events">
<div class="onebyone">
<div class="onebytext">
<div class="textInfo">Test</div>
</div>
<div class="triangle" data-type="vertical_parallax" data-speed="2">
<svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
<polyline fill="#CC0000" points="0,0 0,20 310,20" />
</svg>
</div>
<div class="onebysign">
<button class="submitBtn">Something</button>
</div>
</div>
</div>

Answer 1

A simple solution is to remove width/height from svg and adjust the viewbox to cover the needed part of the polygon, then you can easily use postioning:
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: red;
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%;
position: absolute;
left: 0px;
bottom: 51px;
}
svg {
width: 100%;
height: auto;
}
<div class="row events">
<div class="onebyone">
<div class="onebytext">
<div class="textInfo">Test</div>
</div>
<div class="triangle" data-type="vertical_parallax" data-speed="2">
<svg x="0px" y="0px" viewBox="0 0 310 20">
<polyline fill="#CC0000" points="0,0 0,20 310,20" />
</svg>
</div>
<div class="onebysign">
<button class="submitBtn">Something</button>
</div>
</div>
</div>
Another solution is to use pseudo element with linear-gradient background in order to create the triangle and you will have less HTML code to manage:
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: red;
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;
}
.onebysign:before {
content: "";
height: 30px;
width: 100%;
position: absolute;
background: linear-gradient(to top right, red 47%, transparent 50%);
left: 0;
top: -30px;
}
<div class="row events">
<div class="onebyone">
<div class="onebytext">
<div class="textInfo">Test</div>
</div>
<div class="onebysign">
<button class="submitBtn">Something</button>
</div>
</div>
</div>