Javascript 如何拆分div元素及其内容？（以特定形状）

我试图创造一个独特的形状网页设计。这是一个简单的即将推出的模板，左上角是“信息”按钮，右下角是“联系人”按钮。标志和其他基本材料的绿色中心区域

基本布局如下所示。为此，我创建了3个div元素。当谈到背景色时，这很好。但我的挑战是，我希望这些白色的碎片就像从绿色的碎片上切下来的一样。像这样的

在播放幻灯片、Youtube/Vimeo视频或自定义视频时，我还希望有一个类似于上图的输出

这是一个在绿色区域播放的Youtube视频。但不是我想要的方式

---

我希望最终输出与此类似。身体背景上的图案或小动画图案。在上面的裁剪布局和定制设计另一个更暗的模式，使其更有吸引力

我知道我在这里要求很多。但是我从来没有看到过这样的设计从父div中分离出一些东西（我尝试过溢出方法，它不起作用，或者我错过了一些东西）。除此之外，设计应该是响应性的，并且截止线（白色三角形）的大小必须随着显示屏的缩小而减小

---

我真的需要你们的帮助。提前非常感谢。

应该直截了当地使用CSS创建三角形。祝你好运要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，请描述这个问题以及迄今为止为解决它所做的工作。我已经为此工作了几个月。（因为我是noob）。但我确实试过了。事实上，我以前读过。对于三角形形状，这非常有效。但对于绿色部分，娜达。最后，我使用jquery.corner脚本来创建特定的形状。但是，所有这些都不是我希望网站看起来的样子。@caramba，因为你提出了这一点。我将包括到目前为止我所做的代码片段。