如何使用border来获得div设计

Question

你可以帮助使用css获得div中的以下输出。如果你可以自定义更多，那将更有帮助。

Answer 1

你可以使用Flexbox做这样的事情：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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