Html 带有插入曲线和透明背景的CSS形状

我需要创建一个CSS形状，如下图所示

请检查一下我的工作 我已经创造了这样的东西，但我不能给它一个曲线

#shape {     
    border-left: 70px solid transparent;
    border-top: 100px solid red;
    height: 0;
    width: 200px;
} 

---

有人能帮我吗？

您可以使用带有边框半径和背景阴影的伪元素来创建曲线，并为曲线启用透明背景

输出：

#形状{
宽度：300px；高度：100px；
位置：相对位置；
溢出：隐藏；
}
#形状：以前{
内容：''；
位置：绝对位置；
顶部：10%；右侧：0；
宽度：300%；
垫底：300%；
边界半径：100%；
背景：无；
盒影：10px-10px 5px 300px#F15723；
z指数：-1；
}
正文{背景：url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg)；背景尺寸：封面；}

变体#01: CSS3也可以绘制此背景：

CSS:

div {
  background: linear-gradient(45deg, transparent 50px, tomato 50px);
}

输出图像：

div {
  background: linear-gradient(45deg, transparent 50px, tomato 50px);
}

正文{
背景：线性梯度（浅绿色、绿色）；
最小高度：100vh；
保证金：0；
}
div{
背景：线性梯度（45度，透明50px，番茄50px）；
高度：150像素；
利润率：20px；
宽度：400px；
}

白色部分必须是透明的还是颜色可以？这个URL在不久前帮助我学习和理解了如何使用伪元素来制作许多不同的形状。我建议你们检查一下：白色部分应该是透明的@NicoO@AlvaroMen感谢你的URL。嘿，我在一个页面上添加了，但遇到了一个问题，你使用的是白色，但我需要将其添加到部分上方，因此曲线应该是透明的。。你能告诉我怎么做吗？对不起，我还需要问一件事：（我需要在该div中添加一些文本。如何操作？当我添加时，它不会显示。使用

z-index

属性显示div内容后面的伪元素：我通过将锚定标记定位为abs来实现这一点。你能检查一下吗？你能告诉我出了什么问题吗？希望你能解决此问题：）我想你一定错过了问题中的这句话，但我不能给它一个曲线。你的答案没有曲线。@Harry是的，你是对的。如果我做不到，我会尝试更新我的答案或删除它。仍然不确定这是否是OP想要的。我想他们正在寻找切割本身是曲线的，但屏幕截图似乎是这样的不同。不管怎样，我会把它留在这里，也许OP会回应：）@Harry好的，如果OP有明确的行为要求，我会更新我的答案。