<h1>CSS3 Diagonal border demostration</h1>
<h2>With W3C from-to linear-gradient</h2>
<textarea id="w3c-gradient">Whatever Degree</textarea>
<h2>With -webkit- degree linear-gradient (<a href="https://stackoverflow.com/questions/5570390/resize-event-for-textarea">Use jQueryUI resizable to detect textarea resize event</a>)</h2>
<textarea id="prefixed-gradient">45 Degree</textarea>
html, body{
  background-color: #76FF03;
  font-family: 'Roboto', 'FreesiaUPC', sans-serif;
  margin: 0;
  padding: 0;
}
body{
  margin-left: 1.25vw;
}
h1{
  width: 100%;
  width: calc(100% - 1.25vw);
  color: white;
  background-color: #33691E;
  padding: 20px;
  margin-top: 0;
  margin-left: -1.25vw;
  margin-right: 1.25vw;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}
textarea{
  width: 10vw;
  height: 10vw;
  color: white;
  overflow: hidden;
}
#w3c-gradient{
  background: linear-gradient(to right top, rgba(0,0,56,1) 0%, rgba(0,0,97,1) 50%, rgba(247,58,34,0) 51%, rgba(242,67,44,0) 71%, rgba(233,72,58,0) 100%);
}

#prefixed-gradient{
  background: -webkit-linear-gradient(45deg, rgba(0,0,56,1) 0%, rgba(0,0,97,1) 50%, rgba(247,58,34,0) 51%, rgba(242,67,44,0) 71%, rgba(233,72,58,0) 100%); /* Before resize*/
}
$(document).ready(function(){
	$("#prefixed-gradient").resizable({
	    resize: function() {
	    	var txtarea = $("#prefixed-gradient");
		    var width = txtarea.width(), height = txtarea.height(), angle;
		    angle = Math.atan(width/height)*(180/Math.PI);
		    txtarea.val(angle+" Degree").css("background", "-webkit-linear-gradient("+angle+"deg, rgba(0,0,56,1) 0%, rgba(0,0,97,1) 50%, rgba(247,58,34,0) 51%, rgba(242,67,44,0) 71%, rgba(233,72,58,0) 100%)");
	    }
	});
});

External CSS

  1. https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css
  2. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js