Concave rectangle quadrangle

Question

Using only CSS, can a quad with an internal angle of more than 180 degrees be created by controlling one rectangle? I know that an arbitrary convex quadrilateral can be created from a standard rectangle using CSS3 transforms.

I managed to create concave polygons using several rectangles in several ways (sometimes using overflow hiding); some combination:

• Adjacent rectangles. This is a problem because visual discrepancies occur at the seams due to smoothing, which is more apparent with a high contrast background. The effect can be especially bad when used in combination with a rotation (other than a “good” rotation, for example, 45 degrees). Rectangles also have a crazy tendency to be strangely aligned at different zoom levels.
• Overlapping rectangles, so the quadrangle consists of a union of rectangles (the color of each rectangle is the color of the quadrangle). This is a problem when the color of the quad uses the alpha channel, because the overlap area looks darker.
• Overlapping rectangles, due to which the quadrangle consists of the difference of the rectangles (the color of at least one rectangle is the background color). This is a problem when modeling a shadow by drawing the same shape with an offset, because the overlapping foreground area “erases” any shadow below it.

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

I would like to have a concave quadrangle with a simulated shadow insert (dark foreground color with alpha channel, light shadow color with alpha channel), so # 2 and # 3 above are problematic. At the moment, the real shadow is out of the question; I did not have very good experience with the shadows of the modified elements.

So, any opportunity to do this by manipulating one rectangle? Or is there another way that I have not considered?

[EDIT]

I think this is possible to a limited extent, but it's kind of a cheat: use a one-character text whose glyph is already a concave quadrangle in some fairly safe font (e.g. U + 27A4, black right arrow in Arial Unicode), then convert the crap from him. However, this will have problems aligning between browsers with other page elements.

Answer 1

I'm sure not, because although CSS relies on matrix transformations, it is not a free coordinate transformation — the box coordinates are limited by 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 a shape defined using only three points: p1, p2, p3, and then the implied point p4, which is always calculated as {p2 reflected at 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 obtain a concave quadrangle.