如何使用 CSS3 创建以下样式

Question

我想在 CSS3 中获得这种风格：

CSS3 布局

现在，我有最简单的东西，中间的正方形带有以下代码：

HTML(非常无关紧要，但我想标签不需要是div 标签(：

<div id="divBorder">
</div>

.CSS：

#divBorder{
    border-style: solid;
    border-width: 1px;
    position: absolute;
    width: 300px;
    height: 300px;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -110px 0 0 -160px;
}

所以，我基本上只是将中间的正方形

居中放在屏幕的中心，仅此而已，我找不到一种方法在完整正方形的两侧做另外两个半正方形。

希望你能帮到我，提前谢谢你！

Answer 1

您可以使用弹性框通过以下标记实现所需的布局。

body {
  margin: 0;
}
main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  flex: 1;
  background-color: mediumspringgreen;
}
div {
  flex: 4;
  display: flex;
  background-color: darkviolet;
}
section {
  flex: 1;
}
section:nth-child(even) {
  flex: 2;
  background-color: darkorchid;
}
footer {
  flex: 1;
  background-color: deeppink;
}

<main>
  <header></header>
  <div>
    <section></section>
    <section></section>
    <section></section>
  </div>
  <footer></footer>
</main>

Answer 2

.inner {
border:solid; 
}
.outer {display: flex;
flex-direction:row;}
.side {width: 25%; height: 50px;}
.center {width: 50%; height: 50px}

<div class="outer">
<div class="side inner"></div>
<div class="center inner"></div>
<div class="side inner"></div>
</div>

您可以使用弹性框来执行此操作。您可以在 procentage 中设置宽度，也可以考虑使用 flexbox 调整其大小。