在不使用CSS剪切路径的情况下设置iframe的包装div的样式

Question

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 :before and :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.

 .preview { width: calc(100vw / 20); height: calc(100vh / 10); background: rgba(83, 80, 131, 0.5); cursor: pointer; clip-path: polygon( 10px 0%, 100% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 100%, 0% 10px); } .border-corner { transition: all 0.2s ease-in; background: #e9f396; transform: rotate(45deg); bottom: -15; right: -15; width: 30px; height: 30px; position: absolute; } 

 <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" /> </div> <div class="border-corner"></div> 

Answer 1

You can consider a pseudo element over the iframe that you style using multiple background:

 .box { display:inline-block; background:blue; position:relative; } .box:before { content:""; position:absolute; top:20px; left:20px; bottom:20px; right:20px; background: /*top left corner*/ linear-gradient(to top left ,transparent 49.8%,blue 50%) top left/30px 30px, linear-gradient(to top left ,transparent 49.8%,grey 50%) top left/37px 37px, /*bottom right corner*/ linear-gradient(to bottom right,transparent 49.8%,blue 50%) bottom right/30px 30px, linear-gradient(to bottom right,transparent 49.8%,grey 50%) bottom right/50px 50px, /*borders*/ linear-gradient(grey,grey) top /100% 5px, linear-gradient(grey,grey) bottom /100% 5px, linear-gradient(grey,grey) right /5px 100%, linear-gradient(grey,grey) left /5px 100%; background-repeat:no-repeat; } iframe { display:block; margin:20px; background:red; border:none; } 

 <div class="box"> <iframe scr=""></iframe> </div> 

Answer 2

If you can use mask , you can get a CSS only solution. Please note: That excludes IE 10 and IE 11 and it only works in Edge 18+ (partially).

caniuse.com

However, without clip-path or mask , I highly doubt you will find a solution which makes it look equal in every browser while also allowing you to see what's in the background (assuming you want that element to be "floating" via absolute positioning or something alike). For non-supporting browsers, maybe you should consider having a "simple" box.

 .shape { position: relative; width: 200px; height: 200px; background: #c00; box-shadow: 0 0 0 5px #000 inset; overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='49'%3E%3Cpath d='M11.23 0L0 11.23V49h35.77L47 37.77V0H11.23z'/%3E%3C/svg%3E") 0 0/200px 200px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='49'%3E%3Cpath d='M11.23 0L0 11.23V49h35.77L47 37.77V0H11.23z'/%3E%3C/svg%3E") 0 0/200px 200px; } .shape:before, .shape:after { content: ''; display: block; position: absolute; } .shape:before { top: 0; left: 0; border-style: solid; border-width: 55px 55px 0 0; border-color: #000 transparent transparent transparent; } .shape:after { bottom: 0; right: 0; border-style: solid; border-width: 0 0 70px 70px; border-color: transparent transparent #000 transparent; } .shape_content { display: block; width: 100%; height: 100%; border: 0 none; } 

 <div class="shape"> <iframe src="#foo" class="shape_content"></iframe> </div>