Cannot do the proper rotations of an image when drawing the corners of a frame with CSS

Question

I created a dummy ReactJS component: Frame which renders fine on Chrome but does NOT render fine on Edge.

Here you have the Codesandbox.io:

https://codesandbox.io/s/o4kw405n69

Here you have how it renders on both of them:

On Chrome (Good):

On Microsoft Edge (Bad):

You can try it here by yourself on both browsers:

https://0okjypwknl.codesandbox.io/

In order to create the frame, I use only one simple image:

Then, after some CSS transformations I get the desired effect, including the corners.

Unfortunatelly, on Edge I'm not getting the desired effect on othe corners. Do you have any idea on how to solve this for Edge and of course, keep it working on Chrome?

Please, fork my Codesandbox.io above: https://codesandbox.io/s/o4kw405n69, apply your solution and paste the link here.

By the way, here you have the style that takes care of doing the required transformations to get the frame effect:

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)',
  },
};

(more details on the Codesandbox.io)

Thanks!

That's basically a dupe of https://stackoverflow.com/questions/39477755/how-to-make-clip-path-works-on-microsoft-edge (Edge doesn't support `clip-path` on HTML nor the `` CSS value. Now, there may be other solutions to your problem than the one exposed there, so I'll keep Mjölnir in my pocket for now. — Kaiido, May 10 '19 at 02:52

Kaiido · Accepted Answer · 2019-05-11T09:49:23.543

2

The main problem you are facing is that Edge doesn't support CSS clip-path on HTML elements, nor does it support the <basic-shape> values.

However, you can replace all your code with a simple border-image, which is supposed to be supported by Edge and IE11.
To do so, you'll need to refactor a bit your pattern image so that it looks like this:

.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>

edited May 11 '19 at 09:49

answered May 10 '19 at 04:07

Kaiido

123,334
13
219
285

Hopefully, in the near future Edge will be Chromium based, and the issue with clip-path should disappear. Anyway, it's much better to use border-image than an elaborate custom arrangement – vals May 10 '19 at 08:12
this approach doesn't work on Edge (it is not rendering the border). In the other hand, it works on IE11, Chrome and Firefox. Any idea about why Edge doesn't render the border? Thanks! – davidesp May 10 '19 at 22:19
1

@davidesp, yes, Edge and Chrome btw need a border too. Forgot it, FF, Safari and IE do not require it and [MDN's border-image-generator](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator) doesn't include it... Found this thanks to [this Answer](https://stackoverflow.com/a/37715462/3702797). – Kaiido May 11 '19 at 09:38
Thanks @Kaiido. But now I'm having console errors on `IE11` preventing the whole app to be rendered. Just in case, here I posted my issue: https://stackoverflow.com/questions/56093555 – davidesp May 11 '19 at 19:28

Cannot do the proper rotations of an image when drawing the corners of a frame with CSS

1 Answers1