创建相框类型边框答案

【问题标题】：Create a picture frame type border创建相框类型边框
【发布时间】：2015-08-20 23:35:09
【问题描述】：

我正在尝试创建一个页面，该页面包含在可以被可视化为图片框架类型边框/框架的页面中，如下所示：

到目前为止，我已经找到了三种方法来做到这一点，它们都不能真正满足我的需求，我需要这个框架具有响应性，以便它填满整个屏幕并保持大致相同的比例（不希望框架面板拉伸太薄）。我可以使用 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>

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

还有画布选项，但如果我希望它是全屏和响应式的，我必须重新绘制每个窗口调整大小，这似乎过于复杂。

那么有没有一种简单的响应方式来响应如上所示的框架？

【问题讨论】：

必须支持IE8及以下吗？
不只是主要/当前浏览器就可以了
将 viewBox 添加到 SVG 例如viewBox="0 0 400 500"

标签： html css svg css-shapes

【解决方案1】：

如果您不必支持IE8及以下，您可以使用一个伪元素和background-image来实现框架效果，并用最少的代码让它响应。

内框是使用伪元素生成的，四面有角度的部分是使用有角度的linear-gradient背景图片来实现的。 linear-gradient 图像的尺寸与所有 4 个边上为框架留出的空间相同。在这个 sn-p 中，它的四个边都是 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;
}

&lt;div class="frame"&gt;Some text&lt;/div&gt;

【讨论】：