Html 使用CSS抓取样式形状？

如何使用CSS创建如下面截图所示的形状。绿色矩形看起来很容易制作，但问题是橙色矩形和蓝色矩形。这个项目是一个开源项目，但我找不到上面代码块

我能得到一些提示吗

---

图片来源：

简单的回答是你没有

CSS不太适合这种形状。Scratch使用。我已经直接从零开始复制并粘贴了标签

方法1：使用svg

正文{
背景#f9f9f9；
背景图像：径向梯度（#dfdfdf 2%，透明6%）；
背景位置：0，100px，100px；
背景尺寸：100px 100px；
填充：2rem；
}
.svg形状{
位置：相对位置；
}
.svg形状跨度{
显示：块；
位置：绝对位置；
填充：1rem；
颜色：#fff；
}

移动10步

到目前为止您都尝试了什么？如果标签是直的，您也无法做到。CSS并不是专门为复杂形状设计的。人们用它做了一些令人印象深刻的事情，但对于大多数用途来说并不实用。通常会有多个嵌套的div等。SVG可能是最好的选择。scratch使用的是SVG。使用浏览器开发工具检查元素，您可以准确地看到它们是如何工作的。使用css的一切可能只是我们需要注意的是根据我们的要求提供浏览器支持。干得好@eirenaios@Juntae我会适当地改进形状，并很快更新答案，现在它只是粗略的created@Juntae增加了svg方法，实现简单