Orientation for a div

Question

Hi, Is there a way to change the orientation for a div using css.

ie I need to display a div in a slanting position.

Is there a way by which I can define the four corners of the div

(x1,y1) , (x2,y2) , (x3,y3) and (x4,y4)

Edit

Is there a way to do it using javascript or C#??

Is there a way to change the orientation of an image and not for a div??

Answer 1

This is not possible.

You will need to either use an image or VML/SVG

Please note that IE doesn't natively support SVG, and no other Browsers support VML, but there is an SVG to VML wrapper. Check google

Answer 2

Impossible with pure css, you'll need to use something else like svg, flash or silverlight. Svg will also let you embed arbitrary divs into it, so they will get rotated like you want, but svg isn't supported in IE yet and this particular feature was quite slow when i last tested it.

Answer 3

You could always use border slants instead?

Slants allow you to draw boxes on angles but they won't let you put text on an angle.

Answer 4

It's not possible to do exactly as you want ( in css )

But some how you can do some rotation using (vertical text):

• http://www.ssi-developer.net/css/vertical-text.shtml
• http://www.dynamicdrive.com/dynamicindex10/verticaltext.htm

Answer 5

My need was to do in IE only and I did using matrix filter and setting the values for M11, M12, M21 and M22.

<style>
      .SlantingDiv { padding: 2px; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=1.0,M12=0.4,M21=-0.2,M22=1.0); width: 60; height: 60; padding: 6px; border: #a9a9a9 1px solid }
</style>

<div class="SlantingDiv">
       Slanting Text or Image
</div>