Triangle Algorithm Simple JS

index.html

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero vero animi suscipit debitis unde mollitia veritatis sapiente maxime velit obcaecati repudiandae incidunt, corrupti, voluptates ad. Recusandae itaque doloribus quibusdam fugit ut quis cumque sit, fugiat, culpa perspiciatis mollitia inventore hic tempore aspernatur aliquam quo. Consequatur saepe a cumque! Dicta dignissimos facilis laborum impedit ad sunt quam tenetur? Repellat, officiis sed veritatis possimus ipsum, labore quam eligendi est minus quae incidunt saepe. Consequatur laudantium atque qui soluta, voluptate dolores dolore blanditiis.</div>
  <div class="triangle"></div>
</div>

script.js

//          ===| + b  +
//       ===   | +    |
//    ===   WWWW +    | B
// =========WWWW + h  +
// +-----------+
//  A       +--+
//            w

var updateTriangle = function() {
  var w = $( '.content' ).outerWidth();
  var h = $( '.content' ).outerHeight();
  var r = 27 / 100;
  var b = w * r;
  var B = b + h;
  var A = ( w * B ) / b;
  
  $( '.triangle' ).width( A ).height( B );
}

$( window ).on( 'resize', updateTriangle );

updateTriangle();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container {
  position: relative;
  width: 50vw;
}

.triangle {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 27'><defs><linearGradient id='footerBgGradient' x1='0' x2='0' y1='0' y2='1'><stop offset='0%' stop-color='%23006BA5'/><stop offset='100%' stop-color='%2300487F'/></linearGradient></defs><polygon points='0,27 100,27 100,0' fill='url(%23footerBgGradient)' /></svg>")  no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -10;
}

.content {
  z-index: 10;
  padding: 1rem;
  font-family: sans-serif;
  color: white;
  border: .5rem solid rgba(255,255,255,.5);
}

triangle-algorithm-simple-js.markdown

Triangle Algorithm Simple JS

A Pen by Narthur on CodePen.

License.