在没有 css 剪辑路径的情况下为 iframe 的包装器设置样式 div

Question

我想找到 CSS 的剪辑路径的替代品，以确保与 Internet Explorer、Edge 和 Safari 的跨浏览器兼容性以解决以下问题。

下面的例子展示了我想要做的事情，一个 iframe 组件包裹在一个样式 div 中，边框大小可变：

我能够在切角处使用旋转正方形并使用 clip-path 复制这种样式，并删除带有 clip-path 的 "excess" 正方形，如下图我的组件所示：

当我在 Internet edge 中测试这个组件时出现问题，因为后者不支持 clip-path，所以方块永远不会被剪裁，它看起来是这样的：

正如您可以验证的那样，我的样式包装器甚至与原始示例都不相似，而且它不适用于所有浏览器...

所以我想寻求一些指导，让我可以做些什么来使这种样式化的 div 包装器在所有浏览器中都得到支持，并且与原始示例更加相似。

我读过这可以用 :before 和 :after div 组合来完成，但这不允许我完全包装 iframe 组件。另外，我已经阅读了关于 svg masking 的内容，由于前者的原因，它也不能使用。

感谢任何帮助。

.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

您可以考虑在 iframe 上使用多个背景设置样式的伪元素：

.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

如果可以使用 mask，您可以获得 CSS 唯一的解决方案。请注意：不包括 IE 10 和 IE 11，它仅适用于 Edge 18+（部分）。

caniuse.com

但是，如果没有 clip-path 或 mask，我非常怀疑您会找到一种解决方案，使它在每个浏览器中看起来都一样，同时还允许您查看背景中的内容（假设您希望该元素通过绝对定位或类似方式 "floating" ）。对于不支持的浏览器，也许您应该考虑使用 "simple" 框。

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

在没有 css 剪辑路径的情况下为 iframe 的包装器设置样式 div

Style an iframe's wrapper div without css clip-path

html

javascript

css

cross-browser

reactjs