Make my border triangle responsive [duplicate] - html

Question

This question already has answers here:
Responsive CSS triangle with percents width
(7 answers)
Closed 6 years ago.
I have a div which is a triangle using CSS borders.
It's currently set to 500px width. however I want to make it take up the full width of the screen while maintaining its triangular pointy shape
https://jsfiddle.net/hra17z5t/1/
#one {
width: 500px;
background-color: aqua;
height: 300px;
}
#two{
border-top: 100px solid red;
border-right: 250px solid transparent;
border-bottom: 100px solid transparent;
border-left: 250px solid transparent;
width: 0;
height: 0;
}
<div id="one"></div>
<div id="two"></div>

Answer 1

I have updated your code example: since you wanted to make it responsive to the full browser width, it's pretty straightforward:
#one {
width: 100vw;
background-color: aqua;
height: 300px;
}
#two {
border-top: 100px solid red;
border-right: 50vw solid transparent;
border-bottom: 100px solid transparent;
border-left: 50vw solid transparent;
width: 0;
height: 0;
}
<div id="one"></div>
<div id="two"></div>
Here we're simply setting the box's width to 100vw, which is 100% of the browser width. Since the dimensions of your triangle respond in the same way, based on your example you can simply set the border widths to 50vw (or half the browser width), and it will grow and shrink responsively.

Answer 2

Using jQuery:
$(window).resize(function () {
var divWidth = $('#one').width();
$('#two').css({
borderLeftWidth: divWidth / 2,
borderRightWidth: divWidth / 2
});
});
$(window).trigger('resize');
#one {
max-width: 100%;
}
JSFIDDLE

Answer 3

Found this on Google when searching "Responsive CSS Triangle"
https://jsfiddle.net/josedvq/3HG6d/
Relevant code is below:
/*Down pointing*/
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}