如何使用邊框來獲得低於div的設計

Question

你能否請幫助獲取使用CSS的div下面的輸出。如果你可以定製更多，它會更充分的幫助。

Answer 1

你可以做這樣的事情使用Flexbox的：

body { 
 
    padding: 5%; 
 
} 
 

 
.back-div { 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    width: 400px; 
 
    height: 100px; 
 
    margin-bottom: 100px; 
 
    flex-shrink: 0; 
 
    margin-top: -45px; 
 
    text-align: center; 
 
} 
 

 
.yellow { 
 
    background: yellow; 
 
    width: 400px; 
 
    height: 100px; 
 
    flex-shrink: 0; 
 
    text-align: center; 
 
}

<div class="back-div"> 
 
    <div class="blue"> 
 
    <h1> Text 1</h1> 
 
    </div> 
 

 
    <div class="yellow"> 
 
    <h1> Text 2</h1> 
 
    </div> 
 
</div>

小提琴：https://jsfiddle.net/jdzgsxg4/