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

Question

我创建了一个虚拟的 ReactJS 组件:Frame，它在 Chrome 上呈现良好，但在 Edge 上呈现不佳>.

这里有 Codesandbox.io:

https://codesandbox.io/s/o4kw405n69

这里有它在两者上的渲染方式:

在 Chrome 上(良好):

在 Microsoft Edge 上(差):

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

https://0okjypwknl.codesandbox.io/

为了创建框架，我只使用了一个简单的图像:

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

不幸的是，在 Edge 上，我没有在其他 Angular 上获得预期的效果。您是否知道如何为 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

您面临的主要问题是 Edge doesn't support HTML 元素上的 CSS clip-path，也不支持 <basic-shape>值(value)观。

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

.frame {
  width: 240px;
  height: 320px;
  border: 40px solid transparent;
  border-image: url(/image/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>