创建相框类型边框

Question

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

到目前为止，我已经找到了三种方法 none，其中真正满足我的需求，我需要这个框架是响应式的，以便它填满整个屏幕并保持大致相同的比例（不要'希望框架面板拉伸得太薄）。我可以使用 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 选项，但如果我希望它是全屏和响应式的，我必须重新绘制每个 window 调整大小，这似乎过于复杂。

那么对于如上所示的框架，是否有一种简单的响应方式？

Answer 1

如果您不必支持 IE8 或更低版本，您可以使用一个伪元素和 background-image 来实现框架效果，并以最少的代码使其具有响应性。

内框是使用伪元素生成的，所有边上的角度部分都是使用角度 linear-gradient 背景图像实现的。 linear-gradient 图像的尺寸与 space 在所有 4 个边上留给框架的尺寸相同。在此片段中，它的所有四个边都是 50px space，因此 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>

创建相框类型边框

Create a picture frame type border

html

css

svg

css-shapes