background square with one side at an angle

Question

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:

Here are various examples: http://css-tricks.com/examples/ShapesOfCSS/ — NightHawk, Oct 02 '12 at 22:24

score 9 · Accepted Answer · answered Oct 02 '12 at 22:23

9

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

answered Oct 02 '12 at 22:23

Alex

6,096
1
19
26

@Alex do you happen to know how cross browser this is? Does IE render it the same way? – ug_ Mar 02 '14 at 06:37
@ns47731 I never tested it, but this should be the behavior defined in the standards. So it *should* look the same in every more or less standard-compliant browser. – Alex Mar 12 '14 at 07:31

background square with one side at an angle

1 Answers1

Linked