title: Concave quadrilateral from rectangle
body: <p>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 <em>convex</em> quadrilateral can be created from a standard rectangle using CSS3 transformations.</p>
  
  <p>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:</p>
  
  <ol>
  <li>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.</li>
  <li>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.</li>
  <li>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.</li>
  </ol>
  
  <p>[EDIT] An example of a concave quadrilateral (a kind of "Star Trek" symbol) using #1 and #3 above can be seen <a href="http://jsfiddle.net/ansciath/Wra8a/2/embedded/result/" rel="nofollow">here</a>.</p>
  
  <p>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.</p>
  
  <p>So, any possibility to do this by manipulating a single rectangle? Or, is there some other way that I haven't considered?</p>
  
  <p>[EDIT]</p>
  
  <p>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.</p>