rotate triangle

Trying to create a triangle in the corner of a box to work for IE 8.

by Paul Squillace

HTML

<div id="main-wrapper">
 <div id="header">
  <div id="corner-triangle"></div>
  <div id="triangle-text">Coming<br>August 2016</div>

 </div>
</div>

CSS

/* Whole Page Style */
#main-wrapper { width: 800px; height: 700px; border: 1px solid #cccccc; }
#header { width: 800px; height: 300px; background-color: #2c5198; }

/* Corner Triangle and Text */	
#corner-triangle {
  width: 0; 
  height: 0; 
  border-top: 150px solid transparent;
  border-bottom: 150px solid transparent;
  border-left: 150px solid #eb212f;
	display: block;
	float: right;
	transform: rotate(-45deg);
	margin-top: -97px;
	margin-right: -22px; 

  /* Specifically for IE 8 */	
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";	
}

#triangle-text {
	font-family: "arial";
	font-size: 30px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	float: right;
	display: block;
	position: relative;
	margin-right: -150px;
	transform: rotate(47deg);
	margin-top: 35px;	
}