Разработайте div-обертку для iframe без css-path

Question

Я хочу найти замену пути клипа CSS, чтобы обеспечить кросс-браузерную совместимость с Internet Explorer, Edge и Safari для следующей проблемы.

В следующем примере показано, что я хочу сделать, iframeКомпонент, обернутый в div стиля с переменным размером границы:

Мне удалось несколько повторить этот стиль с помощью пути клипа, используя повернутые квадраты на вырезанномиз углов и убрал «лишний» квадрат с клип-траекторией, как вы можете видеть на следующем изображении моего компонента:

Проблема возникает, когдаЯ тестирую этот компонент на границе интернета, так как последний не имеет поддержки пути клипа, квадраты никогда не обрезаются, и это выглядит так:

Как вы можете убедиться, что моя стилизованная обертка даже не похожа на оригинальный пример, она также работает не во всех браузерах ...

Поэтому я прошу несколько советов о том, что можно сделать, чтобы сделать этот стильДИВОбертка должна поддерживаться во всех браузерах и быть несколько более похожей на оригинальный пример.

Я читал, что это можно сделать с композициями :before и :after div, но это не позволяет мне полностью обернуть iframeсоставная часть.Кроме того, я читал о маскировке svg, которая также не может быть использована по причине первой.

Любая помощь приветствуется.

.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

Если вы можете использовать mask, вы можете получить решение только для CSS. Обратите внимание: исключает IE 10 и IE 11 и работает только в Edge 18+ (частично).

caniuse.com

Однако, без clip-path или mask, я очень сомневаюсь, что вы найдете решение, которое сделает его равным в каждом браузере , а также позволит вам увидеть, что находится в фоновом режиме (при условии, что вы хотите этот элемент должен быть «плавающим» через абсолютное позиционирование или что-то подобное). Для не поддерживающих браузеров, возможно, вам стоит подумать о «простом» окне.

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

Answer 2

Вы можете рассмотреть псевдоэлемент над фреймом, который вы стилизуете, используя несколько фонов:

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