JSFiddle - React, Tailwind, and code Playground

by himel023

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>


    </style>
  </head>

  <body>

    <h2>getting bigga</h2>
    <div id="title" class="triangle-up" style="	width: 0;
	height: 0;
	border-left:27px solid transparent;
	border-right: 27px solid transparent;
	border-bottom: 55px solid #555;"></div>

  </body>

</html>

JavaScript

var title = document.getElementById('title');
var borderLeftVal = Number(extractPx(title.style.borderLeft));
var borderRightVal = Number(extractPx(title.style.borderRight));
var borderBottomVal = Number(extractPx(title.style.borderBottom));


setInterval(() => {
  borderLeftVal = borderLeftVal + 0.1;
  borderRightVal = borderRightVal + 0.1;
  borderBottomVal = borderBottomVal + 0.1;

  title.style.borderLeft = borderLeftVal + "px solid transparent";
  title.style.borderRight = borderRightVal + "px solid transparent";
  title.style.borderBottom = borderBottomVal + "px solid #555";
},50)

function extractPx(styleDetail) {
  var currentValue = "";
  for (y = 0; y < styleDetail.length; y++) {
    if (styleDetail.charAt(y) === "p") {
      break;
    }
    currentValue = currentValue + styleDetail.charAt(y);
  }
  return currentValue;
}