background square with one side at an angle [dupli

问题:

This question already has an answer here:

• Shape with a slanted side (responsive) 3 answers

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:

回答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;
}

​