Concave quadrilateral from rectangle

Question

Using only CSS, can a quadrilateral with an inner angle that is greater than 180 degrees be created by manipulating a single rectangle? I know that an arbitrary convex quadrilateral can be created from a standard rectangle using CSS3 transformations.

I have been able to create concave polygons using multiple rectangles in several different ways (sometimes with the help of hiding overflow); some combination of:

1. Adjacent rectangles. This is a problem because visual discrepancies occur at the seams due to anti-aliasing, which is more obvious with a high-contrast background. The effect can be particularly bad when used in conjunction with a rotation (other than a "nice" rotation like 45 degrees). The rectangles also have a maddening tendency to be oddly aligned at various levels of zoom.
2. Overlapping rectangles, whereby the quadrilateral is composed of the union of the rectangles (the color of each rectangle is the color of the quadrilateral). This is a problem when the color of the quadrilateral uses an alpha channel, because the overlapping area appears darker.
3. Overlapping rectangles, whereby the quadrilateral is composed of the difference of the rectangles (the color of at least one rectangle is the color of the background). This is a problem when simulating a shadow by drawing the same shape at an offset, because the overlapping area of the foreground "erases" any underlying shadow.

[EDIT] An example of a concave quadrilateral (a kind of "Star Trek" symbol) using #1 and #3 above can be seen here.

I would like to have a concave quadrilateral with a simulated inset shadow (dark foreground color with alpha channel, light shadow color with alpha channel), which is why #2 and #3 above are problematic. An actual shadow seems out of the question at this point; I havent had very good experience with the shadows of tweaked elements.

So, any possibility to do this by manipulating a single rectangle? Or, is there some other way that I haven't considered?

[EDIT]

I think this is possible to a limited degree, but it's kind of a cheat: Use a single-character text whose glyph is already a concave quadrilateral in some reasonably safe font (for example, U+27A4, black rightwards arrowhead in Arial Unicode), then transform the crap out of it. This would have problems for cross-browser alignment with other elements of the page, however.

Answer 1

I'm pretty sure there's not, because while CSS relies on matrix transforms, it's not a free coordinate transform - the box coordinates are contrained via reflections:

If we have a rectangle (p1,p2,p3,p4) with p1 opposite p3 and p2 opposite p4, then the CSS representation of this rectangle is an a shape defined using only three points: p1, p2, p3 and then implied point p4 that is always computed as {p2 reflected over the midpoint of line p1-p3}. Any manipulation of the three real coordinates for the rectangle will lead to a change in the fourth, implied coordinate.

This makes it impossible to get a concave quadrilateral.