Question

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

我使用clip-path在图片上创建剪裁的角落。它们需要非常明确地以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, ...)

Answer 1

是的，至少在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度。

Answer 2

我认为问题是垂直和水平坐标相对于图像的高度和宽度 - 例如，只有你可以指定垂直位置作为宽度的百分比（如果图像是肖像），例如。

使用相对单位可以解决它我想如果您知道这些单位中图像的尺寸。无论解决方案如何，您都需要剪切图像，使其呈方形，这样您才能显示不是1：1的图像部分。

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

HTML

<div class="img"></div>

CSS

.img {
    height: 24em;
    width: 24em; 
    border: 1px solid green;
    background: url(yourimg.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
    clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}

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

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

2 个答案: