Создать тип границы фоторамку

Question

Я пытаюсь создать страницу, которая содержится в том, что можно представить как тип изображения границы кадра/кадр, как показано здесь:

До сих пор я нашел три способа для этого ни один из которых действительно не соответствует моим потребностям, мне нужен этот кадр, чтобы он реагировал так, чтобы он заполнял весь экран и поддерживал примерно одинаковое соотношение (не нужно, чтобы панели рамы становились растянутыми слишком тонкими). я могу сделать каждую стену с помощью CSS примерно так:

#left-wall { 
    border-left: 120px solid black; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    height: 10%; 
    width: 0px; 
} 

с внутренним элементом только чуть меньше и белыми оставить только границу остающуюся, но много разметки и не реагировать.

Существует SVG

<svg height="400" width="500"> 
    <polygon points="0,0 100,100 100,300 0,400" style="fill:white;stroke:gray;stroke-width:2" /> 
</svg> 

Что гораздо проще код, но опять-таки не реагирует.

Тогда есть также опция canvas, но если бы я хотел, чтобы он был полноэкранным и отзывчивым, мне пришлось бы перерисовывать каждое изменение размера окна, которое кажется сложным.

Итак, есть простой отзывчивый способ для рамки, как показано выше?

Answer 1

Если вам не нужно поддерживать IE8 и меньше, вы можете использовать один псевдоэлемент и background-image для достижения эффекта кадра, а также иметь возможность реагировать с минимальным кодом.

Внутренний ящик создается с использованием псевдоэлемента, а угловые части со всех сторон достигаются с использованием фоновых изображений под углом linear-gradient. Изображения linear-gradient имеют те же размеры, что и пространство, оставшееся для рамки на всех 4 сторонах. В этом фрагменте это пространство размером 50 пикселей на всех четырех сторонах, поэтому размеры изображения linear-gradient составляют 50 пикселей x 50 пикселей.

.frame { 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background-image: linear-gradient(to top right, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%), linear-gradient(to top right, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%), linear-gradient(to top left, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%), linear-gradient(to top left, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%); 
 
    background-size: 50px 50px; 
 
    background-position: top left, bottom right, top right, bottom left; 
 
    background-repeat: no-repeat; 
 
    padding: 50px; 
 
} 
 
.frame:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: calc(100% - 100px); 
 
    width: calc(100% - 100px); 
 
    top: 48px; 
 
    left: 48px; 
 
    border: 2px solid gray; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
}

<div class="frame">Some text</div>