2

I need to create a CSS3 trapezoid using a div element. To make it crystal clear what I'm doing I've created a basic visual below; green is a normal rectangular div while the red represents the parts I need to change the div to in order to achieve the trapezoid shape I need.

Green is normal rectangle div, red the expanded trapezoid area of the div

Provided that we're editing .trapezoid {} CSS class what are the rules I need to achieve the shape? (Obviously the color is just reference).

John
  • 1
  • 13
  • 98
  • 177

1 Answers1

8

Try this:

.trapezoid { transform: perspective(600px) rotateY(-45deg) scale(1.1,1.1); }

Adjust values as necessary.

Doug
  • 2,400
  • 2
  • 18
  • 24
  • Thanks, that works. I edited your post because you forgot to add the `transform` property to the class and was initially wondering why I had a rectangle. – John May 05 '14 at 21:30