How to create an triangle shape (fixed height, width=100%) with background

Question

I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).

Can I create a triangle shaped element us

Answer 1

Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.

Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :

$(document).ready(function() {
  function triangle() {
    var width = $('#wrap').width(),
      border = width / 4;

    $("#wrap .tr").css({
      "border-left": border + "px solid #fff",
      "border-bottom": border + "px solid transparent"
    });
  }
  triangle();

  $(window).on('resize', triangle);
});

body {
  background: #fff;
}
#wrap {
  position: relative;
  min-height: 500px;
  background: teal;
}
.tr {
  position: absolute;
  left: 0;
  top: 0;
  border-left: 200px solid #fff;
  border-bottom: 200px solid transparent;
}