从矩形凹入四边形

Question

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

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

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

[编辑] 这里可以看到使用#1和#3的凹四边形(一种"星际迷航"符号)的例子.

我希望有一个带有模拟插入阴影的凹四边形(带有alpha通道的深色前景色,带有alpha通道的浅色阴影),这就是上面的#2和#3有问题的原因.在这一点上,一个实际的阴影似乎是不可能的; 我对调整元素的阴影没有很好的体验.

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

[编辑]

我认为这是可能在有限的程度,但它是一种作弊的:使用单字符的文本,其字形已经在一些合理的安全字体凹四边形(例如,U + 27A4,黑色宋体的Unicode向右箭头) ,然后改变废话.但是,这会导致跨浏览器与页面的其他元素对齐的问题.

Answer 1

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

如果我们有一个矩形 (p1,p2,p3,p4)，其中 p1 与 p3 相对，p2 与 p4 相对，则该矩形的 CSS 表示是仅使用三个点定义的 a 形状：p1、p2、p3 以及隐含点 p4其计算方式始终为 {p2 反映在 p1-p3 线的中点}。对矩形的三个实际坐标的任何操作都会导致第四个隐含坐标的变化。

这使得不可能得到凹四边形。