创建一个相框边框类型

我想创建包含在什么可以看作一个相框边框类型/帧如下所示的页面： enter image description here 创建一个相框边框类型

到目前为止，我已经发现了三种方法做它没有真正符合我的需求，我需要这个框架的响应，以便它填充整个屏幕，并保持大致相同的比例（不希望框架面板拉得太细）。我可以使用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>

这是更简单的代码，但不再响应。

然后还有画布选项，但如果我希望它是全屏幕和响应我不得不重绘每一个窗口调整大小，这似乎过于复杂。

那么有没有一个简单的响应方式来像上面显示的框架？

来源

2015-06-21 DasBeasto

你有支持IE8少？ – Harry

只是主要/当前的浏览器都没有问题 – DasBeasto

向SVG添加视图框例如viewBox =“0 0 400 500” –

如果您不需要支持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>

来源

2015-06-21 15:39:17 Harry

创建一个相框边框类型

回答

相关问题