Dynamically creating triangle with max-width/fit inside div

Dynamically creating triangle with max-width/fit inside div

I have a web page that accepts three inputs. I am dynamically creating a
triangle from these three inputs (by setting border-widths). I want the
triangle to fit inside the div on the page. For example, if the inputs
were 500, 500, 300 I want to reduce these to fit inside the div on the
page while retaining the aspect ratio of the inputs.
HTML:
<div id="triangle"></div>
CSS:
#triangle {
max-width: 200px;
width: 0;
height: 0;
margin: 0 auto;
}
jQuery:
$("#triangle").css({
"border-left": length1 + "px solid transparent",
"border-right": length2 + "px solid transparent",
"border-bottom": length3 + "px solid #2383ea"
});