Html 如何使用CSS3创建以下样式？

我希望在CSS3中使用这种样式：

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

HTML（非常不相关，但我猜标记不需要是div标记）：

所以，我基本上只是把中间的正方形放在屏幕中央，就这样，我找不到一种方法来做另外两个半正方形，在整个正方形的两边

---

我希望你能帮助我，提前谢谢你

使用以下标记可以实现所需的布局

正文{
保证金：0；
}
主要{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
标题{
弹性：1；
背景色：中绿色；
}
div{
弹性：4；
显示器：flex；
背景色：暗色；
}
部分{
弹性：1；
}
部分：第n个子项（偶数）{
弹性：2；
背景颜色：darkorchid；
}
页脚{
弹性：1；
背景颜色：深粉色；
}

.inner{
边框：实心；
}
.外部{显示：flex；
弯曲方向：行；}
.侧面{宽度：25%；高度：50px；}
.center{宽度：50%；高度：50px}

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

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