流体颜色矩形的CSS代码不起作用

Question

我目前正在使用Semplice在我的投资组合网站上工作。

我有一个特定的布局，为此我需要使用CSS代码。我从来没有在我的生活中编写过代码，并且正在努力学习如何编写代码。

对于这个具体的例子，我想在背景中使用流动的彩色方块。

这是我一直努力工作的代码：

.rectangle-box{
  position: relative;
  width: 50%;
  overflow: hidden;
  background: #D3D3D3;
}
.rectangle-box:before{
  content: "";
  display: block;
  padding-top: 50%;
}
.rectangle-content{
  position: absolute;
  top: 50;
  left: 50;
  bottom: 50;
  right: 50;
  color: light grey;
}
.rectangle-content div {
  display: table;
  width: 100%;
  height: 100%;
}

感谢任何帮助！

谢谢你， 柔