Невозможно сделать правильные повороты изображения при рисовании углов кадра с помощью CSS

Question

Я создал фиктивный ReactJS компонент: Frame, который хорошо обрабатывает Chrome, но НЕ визуализирует Edge.

Здесь у вас есть Codesandbox.io:

https://codesandbox.io/s/o4kw405n69

Здесь вы видите, как он рендерит на них обоих:

Вкл. Хром (Хорошо):

Вкл. Microsoft Edge (Плохо):

Вы можете попробовать здесьсамостоятельно в обоих браузерах:

https://0okjypwknl.codesandbox.io/

Для создания рамки я использую только одно простое изображение:

Затем, после некоторых CSS преобразований, я получаю желаемый эффект, включая углы.

К сожалению, на Edge Я не получаю желаемый эффект на других углах.Есть ли у вас какие-либо идеи о том, как решить эту проблему для Edge и, конечно, продолжать работать на Chrome?

Пожалуйста, раскошелите мой 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 не поддерживает CSS-путь клипа для элементов HTML и не поддерживает значения <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>