Html 指定相对于右/上边缘的CSS多边形

是否可以使用相对于元素边缘的点在CSS中指定多边形

我正在使用

剪辑路径

在图像上创建剪辑角。它们需要非常明确地处于55%的角度

如果使用百分比指定八角形，则角度取决于图像元素的纵横比。例如：

-webkit-clip-path: polygon(
    29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%
  );

我想做的是指定相对于元素上、左、右和下边缘的点，可能在em中。所以理论上，类似于：

polygon(left+0.7em top, right-0.7em 0, ...)

---

我认为问题在于垂直坐标和水平坐标相对于图像的高度和宽度——例如，如果您可以将垂直位置指定为宽度的百分比（如果图像是纵向的话）

使用相对单位可以解决这个问题，我想如果你知道以这些单位表示的图像的尺寸。不管解决方案是什么，你都需要剪裁图像，使其呈方形，这样你只能显示一部分不是1:1的图像

我能想到的唯一解决方案是将图像作为一个div的背景，在这里你提供一个正方形的尺寸，然后使背景图像覆盖该div，这样如果是纵向的，高度被剪裁，如果是横向的，宽度被剪裁（它将尽可能少地填充背景剪裁）。然后将剪辑路径应用于该div

HTML

---

当然，您可以根据需要调整尺寸。我认为对于相对单元，这仍然符合响应性的需要，甚至可能比内联图像更灵活，但在可用性方面可能不太理想（您可以考虑将内联图像移出视图，并使用：：after来创建和设置背景版本的样式）.

我认为问题在于垂直坐标和水平坐标相对于图像的高度和宽度-例如，如果您可以将垂直位置指定为宽度的百分比（如果图像是纵向的话）

使用相对单位可以解决这个问题，我想如果你知道以这些单位表示的图像的尺寸。不管解决方案是什么，你都需要剪裁图像，使其呈方形，这样你只能显示一部分不是1:1的图像

我能想到的唯一解决方案是将图像作为一个div的背景，在这里你提供一个正方形的尺寸，然后使背景图像覆盖该div，这样如果是纵向的，高度被剪裁，如果是横向的，宽度被剪裁（它将尽可能少地填充背景剪裁）。然后将剪辑路径应用于该div

HTML

---

当然，您可以根据需要调整尺寸。我认为相对单元仍然符合响应性的需要，甚至可能比内联图像更灵活，但在可用性方面可能不太理想（您可能会考虑将内联图像移出视图，并使用：：after创建和设置背景版本的样式）。

是的，至少在Chrome中可以。在指定多边形时，只需使用css calc即可

比如说

-webkit-clip-path: polygon(
  64px 0, calc(100% - 64px) 0, 100% 92px, 100% calc(100% - 92px),
  calc(100% - 64px) 100%, 64px 100%, 0 calc(100% - 92px), 0 92px );

---

将为您提供一个角度为±55度的漂亮八角形。

是的，至少您可以使用镀铬。在指定多边形时，只需使用css calc即可

比如说

-webkit-clip-path: polygon(
  64px 0, calc(100% - 64px) 0, 100% 92px, 100% calc(100% - 92px),
  calc(100% - 64px) 100%, 64px 100%, 0 calc(100% - 92px), 0 92px );

将为您提供一个角度为±55度的八角形

-webkit-clip-path: polygon(
  64px 0, calc(100% - 64px) 0, 100% 92px, 100% calc(100% - 92px),
  calc(100% - 64px) 100%, 64px 100%, 0 calc(100% - 92px), 0 92px );