創建一個相框邊框類型

我想創建包含在什麼可以看作一個相框邊框類型/幀如下所示的頁面： 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

創建一個相框邊框類型

回答

相關問題