創建邊框2周的div

Question

只是一個快速的問題...

我已經創建了兩個div - 本質上是兩個廣場，一個大一個小 - 位於一個下另一個。

我想提出一個邊框圍繞這兩個的div來勾勒整個形狀 - 不是我的圖片做了兩個div的周圍的輪廓 - 它的葉子之間我已經盤旋線在圖像中。這可能嗎？

這裏是的div的HTML和CSS：

#shapeTop { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: blue; 
 
    float: right; 
 
    outline: 4px solid black; 
 
} 
 
    
 
#shapeBottom { 
 
    height: 420px; 
 
    width: 420px; 
 
    background: blue; 
 
    clear: both; 
 
    float: right; 
 
    outline: 4px solid black; 
 
}

<div id="shape"> 
 
    <div id="shapeTop"> 
 
    </div> 
 
    
 
    <div id="shapeBottom"> 
 
    </div> 
 
</div>

預先感謝您 - 摹

Answer 1

使用border代替，禁用底部邊框上的機頂盒，添加position: relative到機頂盒，使其顯示在底部一頂，並使用translateY()推機頂盒下跌4像素，使其覆蓋底盒的邊境。

#shapeTop { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: blue; 
 
    float: right; 
 
    border: solid black; 
 
    border-width: 4px 4px 0; 
 
    position: relative; 
 
    transform: translateY(4px); 
 
} 
 
    
 
#shapeBottom { 
 
    height: 420px; 
 
    width: 420px; 
 
    background: blue; 
 
    clear: both; 
 
    float: right; 
 
    border: 4px solid black; 
 
}

<div id="shape"> 
 
    <div id="shapeTop"> 
 
    </div> 
 
    
 
    <div id="shapeBottom"> 
 
    </div> 
 
</div>

Answer 2

簡單，只需設置border-bottom屬性爲0px，或無，用於頂盒（並將所有的outlines轉換爲borders）。

然後，將底部框的border-top設置爲none。

最後，在底部框中添加一個：僞元素之前（您還必須在底部框上設置position: relative;）。這樣的：前元素應該包含以下代碼：

#bottomBox:before { 
content: ""; // needed any :before element 
position: absolute; // needed for following code 
left: 0; // 
top: 0; // sets it to start at the top left 
height: 2px; /* thickness of border */ 
width: 150px; /* adjust this until its the correct length */ 
background-color: black; /* color of border */ 

} 

Answer 3

設置下邊框爲0px不會從大廣場刪除邊框頂部，我建議設置：底部邊框：5px的純藍色;並在#shapeBottom下面有#shapeTop，並在最後一行中有該屬性 - 在這種情況下，它將覆蓋上面的所有內容。