创建图片框类型边框

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>

这是更简单的代码，但同样没有响应。

然后还有画布选项，但如果我想要全屏和响应，我必须重新绘制每个窗口调整大小，这似乎过于复杂。

对于如上所示的帧，有一种简单的响应方式吗？

Answer 1

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

使用伪元素生成内框，并且使用有角度的linear-gradient背景图像实现所有边上的成角度部分。 linear-gradient图像的尺寸与所有4个边框架的剩余空间相同。在这个片段中，四边都是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>