Clip and a transform:rotate(...)

I have a rotated, absolute positioned div inside a container div.

I want to clip the rotated div so it fits inside the container. Can I do that?

EDIT: For those who have no idea about this, please see CSS3 clip. I could not get it to do this. (Chrome)

I tried clip: rect(auto,auto,auto,auto) which I believed should do the clipping for me.

Solution

First off, clip isn't new to CSS3. In fact, it's been deprecated in favor of an entire collection of new properties.

Second, here's what the CSS2.1 spec says about clip:

In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box. Authors should separate offset values with commas.

This means:

clip works on the element itself. No other element is affected.
clip: auto, or clip: rect(auto, auto, auto, auto) has no effect on an element because it's the same as not clipping the element at all. Any transforms that may be in effect are irrelevant because they actually transform the clipping region along with the rest of the element.

To clip an absolutely-positioned element to its containing block, use overflow: hidden on the containing block instead. Ensure that you actually designate its containing block using position: relative or similar.