background square with one side at an angle [duplicate]

Question

This question already has answers here:

Shape with a slanted side (responsive) (3 answers)

Closed 3 years ago.

I want to be able to create a transparent background using only CSS but with an angle on one end. I've found various ways of trying to do it, but can't quite get it. I don't really want to use any scripting, just CSS.

Background image would need to look like this:

Answer 1

You could do it using borders: http://jsfiddle.net/wNhjb/

#shape {
   height: 0; 
   width: 80px;
   border-top: 80px solid blue;
   border-left: 40px solid transparent;
}

​