<div class="outer">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>
html, body {
  margin: 0;
}
.outer {
  position: relative;
}
.outer::before,
.outer::after {
  content: "";
  display: block;
  min-height: 300px;
  border: 2px solid #000;
}
.outer::before {
  background: #99a; /* Grey block */
}
.outer::after {
  background: #e6a; /* Pink Block */
}
.top,
.bottom { /* Containers for shapes */
  position: absolute;
  display: block;
  background: transparent;
}
.top {
  top: 20%;
  left: 0;
  right: 50%;
  bottom: 30%;
}
.bottom {
  top: 70%;
  left: 50%;
  right: 0;
  bottom: 0;
}
.top::before,
.top::after { /* Blue shape */
  display: block;
  content: "";
  position: absolute;
  background: #0ff;
  top: 0;
  right: 0;
}
.top::before { /* Horizontal part */
  left: 0;
  height: 65px;
}
.top::after { /* Vertical part */
  width: 65px;
  bottom: 0;
}
.bottom::before,
.bottom::after { /* Yellow shape */
  display: block;
  content: "";
  position: absolute;
  background: #ff0;
  top: 0;
  left: 0;
}
.bottom::before { /* Horizontal part */
  right: 0;
  height: 65px;
}
.bottom::after { /* Vertical part */
  width: 65px;
  bottom: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.