使用CSS抓取样式形状？

如何使用CSS创建形状，如下面的屏幕快照所示。绿色矩形看起来很容易制作，但是问题是橙色的和蓝色的。该项目是一个开源项目https://github.com/LLK/scratch-www，但是我找不到上述代码块的代码。

我可以得到一些提示吗？

图片来源：https : //scratch.mit.edu/projects/editor/?tutorial=getStarted

方法1：使用svg

body {
  background: #f9f9f9;
  background-image: radial-gradient(#dfdfdf 2%, transparent 6%);
  background-position: 0 0, 100px 100px;
  background-size: 100px 100px;
  padding: 2rem;
}

.svg-shape {
  position: relative;
}

.svg-shape span {
  display: block;
  position: absolute;
  padding: 1rem;
  color: #fff;
}

  move 10 steps