TutorialMeta
Ad

Style An Iframe's Wrapper Div Without Css Clip-path

- 1 answer

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:

enter image description here

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:

enter image description here

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:

enter image description here

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>

Ad

Answer

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>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad