html - 创建相框类型边框

我正在尝试创建一个页面，该页面包含在可以显示为相框类型边框/框架的内容中，如下所示：


到目前为止，我已经找到了三种方法来实现它，这些方法都不是真正能满足我的需求的，我需要此框架具有响应能力，以便它能填满整个屏幕并保持大致相同的比例（不希望框架面板被拉伸太薄）。
我可以使用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选项，但是如果我希望它全屏显示并响应，我将不得不重新绘制每个窗口的大小，这似乎过于复杂。

那么，是否有一种简单的响应方式可以应对上述框架？

最佳答案

如果不必支持IE8或更低版本，则可以使用一个伪元素和background-image来实现帧效果，并使它以最少的代码响应。

使用伪元素生成内框，并使用成角度的linear-gradient背景图像获得所有侧面的成角度部分。 linear-gradient图像的尺寸与所有四个侧面上框架的剩余空间相同。在此代码段中，所有四个边的间距均为50px，因此linear-gradient图片的尺寸为50px X 50px。

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