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

I think it would be best to use background instead of borders:

.my-triangle {
   width: 100%;
   height: 200px;
   background: linear-gradient(to left top, transparent 50%, red 50%);
}

Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)

  background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
  background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
  background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
  background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
  background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
  background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);