你能给图像一个倾斜的边缘吗？

Question

我正在尝试创建一个边缘成角度的漫画面板效果。我提供了一个我想要获得的示例图片。这可以用css完成吗？

Answer 1

是的，这可以使用clip-path属性在CSS中完成。

使用polygon()值，您可以获得您想要的任何形状。它的使用方式如下：

clip-path: polygon(a, b, c, [...])

上例中的每个字母代表路径中某个点的坐标，每个点都有一个X和Y值，从左上角开始。

例如，这个：

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

...意味着第一个点将是50％X和0％，所以顶部中心。第二个点（0％100％）将为0％X和100％Y，因此左下角。最后一点（100％100％）将是100％X和100％Y，所以右下角。这将形成三角形。

Clippy是一个很好的工具，可以为您生成clip-path，您可以将点拖放到您想要的位置，只需复制它为您生成的clip-path。< / p>

请注意浏览器兼容性is not very good。

Answer 2

可以使用css剪辑完成，但浏览器兼容性对您来说可能是个问题，请参阅下面的链接了解详细信息。

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

Answer 3

您可以使用 SVG

执行此操作

.element {
  text-align: center;
}
svg {
  width: 40vw;
  overflow: visible;
}
.st0 {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-miterlimit: 10;
}
.st1 {
  fill: white;
  stroke: #000000;
  stroke-miterlimit: 10;
}
polygon {
  transition: all 0.3s ease-in;
  transform-origin: center;
}
polygon:hover {
  transform: scale(1.1);
}

<div class="element">
  <svg viewBox="0 0 250 400" style="enable-background:new 0 0 250 400;">
    <polygon class="st0" points="12.111,175.777 12.111,9.111 239.889,9.111 239.889,80.222 " />
    <polygon class="st0" points="239.889,257.444 239.889,86.889 12.111,182.444 12.111,217.444 " />
    <polygon class="st1" points="106.84,241.17 106.84,393.56 12.11,393.56 12.11,225.22 " />
    <polygon class="st1" points="239.89,263.56 239.89,393.56 118.05,393.56 118.05,243.05 " />
  </svg>
</div>