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

использование CSS Clip-path:

все, что нам нужно сделать, это использовать polygon для обрезки, как в приведенном ниже фрагменте, и примените его к контейнеру. Такой путь будет показывать фоновое изображение в промежутке между внешним и средним ящиками, скрывать или обрезать фоновое изображение между средним и внутренним ящиками коробка.

div {
  height: 200px;
  width: 100%;
  background: url(http://lorempixel.com/800/200/abstract/6);
}
#css-pattern {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0px 0px, 20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px, 40px 40px, 40px calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) 40px, 40px 40px);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0px 0px, 20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px, 40px 40px, 40px calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) 40px, 40px 40px);
}

/* just for demo */

body {
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}

<h3>Pure CSS Clip-path with fixed width gap on all 4 sides</h3>
<div id='css-pattern'></div>

использование SVG Clip-path:

SVG clip-path предлагает лучшую поддержку браузера, чем версия CSS, поскольку она также поддерживается Firefox. Все, что нам нужно сделать, это создать path как в приведенном ниже фрагменте и используйте его для отсечения контейнера.

svg path {
  fill: transparent;
  stroke: black;
}

/* Just for fun */

path {
  animation: draw 5s linear;
  stroke-dasharray: 4450;
}
@keyframes draw {
  from {
    stroke-dashoffset: -4450;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg width='600px' height='200px'>
  <path d='M0,0 600,0 600,200 0,200 0,0 20,20 20,180 580,180 580,20 20,20 40,40 40,160 560,160 560,40 40,40 z' />
</svg>

реализация SVG была бы намного проще, если бы размеры вашего контейнера были статический. Поскольку они не являются статическими, значения дробей не могут использоваться, поскольку значение будет отличаться в зависимости от фактической ширины элемента (независимо от 100% соответствует). Скажем, например, дробное значение 0.2 будет означать 40px для широкого элемента 200px и будет означать 80px для широкого элемента 400px. Вы можете увидеть, как это влияет на выход в первом примере фрагмента.

один из способов преодолеть это - использовать JavaScript (или любую другую библиотеку сценариев, которую вы предпочитаете), получите фактическую вычисленную ширину элемента в пикселях и вычислите значения координат пути d атрибут на его основе. Второй пример в приведенном ниже фрагменте использует этот метод.

Примечание: Clip-path не поддерживается IE, но поскольку вы создаете приложение iOS, я думаю, что это не должно быть серьезной проблемой для вас.

window.onload = function() {
  setPathCoords();
};
window.onresize = function() {
  setPathCoords();
};

function setPathCoords() {
  var output = [],
    borderWidth = '20';
  var el = document.getElementById('percentage-pattern'),
    path = document.querySelector('#clipper2 > path'),
    origPath = 'M0,0 1,0 1,1 0,1 0,0 ';
  height = el.clientHeight;
  width = el.clientWidth;

  for (var x = 1; x < 3; x++) {
    point1 = (borderWidth * x) / width + "," + (borderWidth * x) / height;
    point2 = (borderWidth * x) / width + "," + (height - (borderWidth * x)) / height;
    point3 = (width - (borderWidth * x)) / width + "," + (height - (borderWidth * x)) / height;
    point4 = (width - (borderWidth * x)) / width + "," + (borderWidth * x) / height;

    output.push(point1);
    output.push(point2);
    output.push(point3);
    output.push(point4);
    output.push(point1);
  }
  document.querySelector('#clipper2 > path').setAttribute('d', origPath + output.join(' ') + 'z');
}

div {
  height: 200px;
  width: 100%;
  background: url(http://lorempixel.com/800/200/abstract/6);
}
#percentage-pattern {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
#js-pattern {
  -webkit-clip-path: url(#clipper2);
  clip-path: url(#clipper2);
}

/* just for demo */

body {
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 1,0 1,1 0,1 0,0 0.1,0.1 0.1,0.9 0.9,0.9 0.9,0.1 0.1,0.1 0.2,0.2 0.2,0.8 0.8,0.8 0.8,0.2 0.2,0.2z' />
    </clipPath>
    <clipPath id='clipper2' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 1,0 1,1 0,1 0,0 ' />
    </clipPath>
  </defs>
</svg>

<h3>Output with JS</h3>
<div id='js-pattern'></div>
<h3>Pure SVG Clip-path</h3>
<div id='percentage-pattern'></div>