如何使股利（非表中的一個）

-1

與此模板完全以stucked這樣的模板。知道如何用桌子做，但需要它在div上。角具有固定寬度（35x35 v和65x35 h），主容器具有自適應寬度。嘗試浮動和內嵌塊，但沒有成功。如何使股利（非表中的一個）

閱讀評論後，我已經試過紅色方塊用z-index：頂部是好的，但有底部方形的煩惱 -

<style> 
.red_top { 
    background-color:red; 
    position:absolute; 
    width:65px; 
    height:65px; 
    z-index:-1; 
    } 
.red_bottom { 
    align:right; 
    verical-align:bottom; 
    background-color:red; 
    position:relative; 
    width:65px; 
    height:65px; 
    z-index:-1; 
    top:-35px;} 
.main_cont 
    { 
     border:1px solid blue; 
     margin-top:25px; 
     margin-left:25px; 
     min-height:100px; 
     z-index:1; 
     background-color:#FFF; 
    } 
</style> 
<body style="margin: 60px 50px;"> 
<div style="width:100%; border:1px solid #000;"> 
    <div class="red_top">&nbsp;</div> 
    <div class="main_cont">Content Here</div> 
    <div class="red_bottom">&nbsp;</div> 
</div>

https://codepen.io/anon/pen/OxavGL

來源

2017-10-16 Cove

難道僅僅應該是一個空框，你可以調整？還是應該包含東西？你想用它做什麼？只是一個設計風格與框中的內容？ –

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

創建兩個紅色正方形，並用'position：absolute'定位它們？ –

您可以使用僞元素在你的元素之前和之後創建兩個盒子並絕對定位它們。

.box:before { 
    content: ''; 
    width: 35px; 
    height: 35px; 
    background: red; 
    position: absolute; 
    top: -17.5px; 
    left: -17.5px; 
    z-index: -1; 
} 

.box:after { 
    content: ''; 
    width: 35px; 
    height: 35px; 
    background: red; 
    position: absolute; 
    bottom: -17.5px; 
    right: -17.5px; 
    z-index: -1; 
}

這裏有一個工作筆：https://codepen.io/anon/pen/OxaVea

來源

2017-10-16 16:04:07

嗯，這真的是一個很好的方法，但在我看來，FF z-index在這種情況下不起作用，紅色正方形在黑色框之上，但不在下面。 – Cove

如何使股利（非表中的一個）

回答

相關問題