ボーダーをdivデザインの下に取得する方法

Question

divの下の出力をCSSで取得するにはどうすればよいですか？あなたがもっとカスタマイズすることができれば、それははるかに多くの助けになるでしょう。

Answer 1

あなたはフレキシボックスを使用して、このような何か行うことができます：

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/