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

Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:

.triangle{
   width: 0;
   height: 0;
   border-bottom: 600px solid blue;
   border-left: 100vw solid transparent;
  }