I want to find a replacement for CSS's clip-path to assure cross-browser compatibility with internet explorer, edge and safari for the following issue.
The following example shows what I want to do, an iframe component wrapped in a style div with variable border size:
I was able to somewhat replicate this style with clip-path using rotated squares at the cutted out corners and removed the "excess" square with clip-path as you can see in the following image of my component:
The problem arises when I test this component in internet edge, since the latter does not have support to clip-path the squares are never clipped and it appears as so:
As you can verify my styled wrapper is not even similar to the original example, also it does not work in all browsers...
So I am asking for some guidance in what I can do to make this styled div wrapper be supported in all browsers and be somewhat more similar to the original example.
I have read this can be done with
:after div compositions but that does not allow me to completely wrap the iframe component. Also, I have read about svg masking which can not also be used due the reason of the former.
Any help is appreciated.
width: calc(100vw / 20);
height: calc(100vh / 10);
background: rgba(83, 80, 131, 0.5);
clip-path: polygon( 10px 0%, 100% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 100%, 0% 10px);
transition: all 0.2s ease-in;
<div class="preview center">
<img class="image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968" />