创建一个相框边框类型
问题描述:
我想创建包含在什么可以看作一个相框边框类型/帧如下所示的页面: 创建一个相框边框类型
到目前为止,我已经发现了三种方法做它没有真正符合我的需求,我需要这个框架的响应,以便它填充整个屏幕,并保持大致相同的比例(不希望框架面板拉得太细)。 我可以使用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或更低版本,则可以使用一个伪元素和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>
你有支持IE8少? – Harry
只是主要/当前的浏览器都没有问题 – DasBeasto
向SVG添加视图框例如viewBox =“0 0 400 500” –