从矩形凹入四边形

Question

仅使用CSS，可以通过操作单个矩形来创建内角大于180度的四边形吗？我知道可以使用CSS3转换从标准矩形创建任意凸四边形。

我已经能够以几种不同的方式使用多个矩形创建凹多边形（有时借助隐藏溢出）;某些组合：

1. 相邻的矩形。这是一个问题，因为由于抗锯齿而在接缝处出现视觉差异，这在高对比度背景下更明显。当与旋转一起使用时效果可能特别差（除了像45度这样的“漂亮”旋转）。矩形还具有令人发狂的倾向，即在不同的变焦水平下奇怪地对齐。
2. 重叠矩形，其中四边形由矩形的并集组成（每个矩形的颜色是四边形的颜色）。当四边形的颜色使用Alpha通道时，这是一个问题，因为重叠区域看起来更暗。
3. 重叠矩形，其中四边形由矩形的差异组成（至少一个矩形的颜色是背景的颜色）。在通过在偏移处绘制相同形状来模拟阴影时，这是一个问题，因为前景的重叠区域“擦除”任何底层阴影。

[编辑]可以看到使用上面＃1和＃3的凹四边形（一种“星际迷航”符号）的示例here。

我想要一个带有模拟嵌入阴影的凹四边形（带有alpha通道的深色前景色，带有alpha通道的浅色阴影），这就是上面的＃2和＃3有问题的原因。在这一点上，一个实际的阴影似乎是不可能的;我对调整元素的阴影没有很好的体验。

那么，有没有可能通过操纵一个矩形来做到这一点？或者，还有其他方法我没有考虑过吗？

[编辑]

我认为这在一定程度上是可能的，但这是一种欺骗：使用单字符文本，其字形已经是一个合理安全字体的凹四边形（例如，U + 27A4，黑色向右箭头Arial Unicode），然后将垃圾转换出来。但是，这会导致跨浏览器与页面的其他元素对齐的问题。

Answer 1

我很确定没有，因为虽然CSS依赖于矩阵变换，但它不是自由坐标变换 - 盒子坐标是通过反射来限制的：

如果我们有一个矩形（p1，p2，p3，p4），p1与p3相反，p2与p4相反，则此矩形的CSS表示形式是仅使用三个点定义的形状：p1，p2，p3然后隐含点p4，总是计算为{p2反映在p1-p3线的中点}。对矩形的三个实际坐标的任何操作都将导致第四个隐含坐标的变化。

这使得无法获得凹四边形。