使用 CSS 绘制框架的角时无法正确旋转图像

Question

我创建了一个虚拟的ReactJS 组件：Frame，它在Chrome 上渲染得很好，但在Edge 上渲染得不好。

这里有Codesandbox.io：

https://codesandbox.io/s/o4kw405n69

这里有它在它们上的渲染方式：

在 Chrome 上（良好）：

在 Microsoft Edge（坏）上：

您可以在这两种浏览器上自行尝试：

https://0okjypwknl.codesandbox.io/

为了创建框架，我只使用了一张简单的图片：

然后，经过一些CSS 转换后，我得到了想要的效果，包括角落。

不幸的是，在Edge 上，我在其他角落没有得到想要的效果。您对如何为Edge 解决这个问题有任何想法吗？当然，让Chrome 继续工作？

请在上面 fork 我的Codesandbox.io：https://codesandbox.io/s/o4kw405n69，应用您的解决方案并将链接粘贴到此处。

顺便说一下，这里的样式负责进行所需的转换以获得框架效果：

this.style = {
  frame: {
    position: 'absolute',
    width: widthFrame + 'px',
    height: heightFrame + 'px',
    ...((urlImageMat !== false) && {
      backgroundImage: 'url("' + urlImageMat + '")',
    }),
  },
  image: {
    backgroundImage: 'url("' + urlImageMain + '")',
    backgroundRepeat: 'no-repeat',
    backgroundSize: widthImage + 'px ' + heightImage + 'px',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%',
  },
  trapezoidTop: {
    width: widthFrame + 'px',
    height: thickFrame + 'px',
    clipPath: 'polygon(0 0, 100% 0, calc(100% - ' + thickFrame + 'px) 100%, ' + thickFrame + 'px 100%)',
    transformOrigin: 'top left',
    transform: 'rotate(0deg)',
  },
  trapezoidLeft: {
    width: heightFrame + 'px',
    height: thickFrame + 'px',
    marginTop: - thickFrame + 'px',
    clipPath: 'polygon(0 0, 100% 0, calc(100% - ' + thickFrame + 'px) 100%, ' + thickFrame + 'px 100%)',
    transformOrigin: 'top left',
    transform: 'rotate(90deg) scale(1, -1)',
  },
  trapezoidImage: {
    backgroundImage: 'url("' + urlImageFrame + '")',
    backgroundSize: 'contain',
  },
  edgeTLBR: {
    position: 'absolute',
  },
  edgeBR: {
    display: 'inline-block',
    width: widthFrame + 'px',
    height: heightFrame + 'px',
    transform: 'rotate(180deg)',
  },
};

（更多详情请关注Codesandbox.io）

谢谢！

Answer 1

您面临的主要问题是 HTML 元素上的 Edge doesn't support CSS 剪辑路径，也不支持 <basic-shape> 值。

但是，您可以将所有代码替换为简单的 border-image，Edge 和 IE11 应该支持该代码。
为此，您需要重构一些图案图像，使其看起来像这样：

.frame {
  width: 240px;
  height: 320px;
  border: 40px solid transparent;
  border-image: url(https://i.stack.imgur.com/5BS1b.png) repeat;
  border-image-slice: 40;
  border-image-width: 40px;

  background-image: url(https://i.ibb.co/wQSgvS7/jessica.jpg), url(https://i.ibb.co/nkDzKB1/mcol-bottle-blue-bg.png);

  background-size: 200px 280px, auto;
  background-position: center;
  background-repeat: no-repeat, repeat;
}

<div class="frame"></div>