CSS3 - 帮助创建两个 100% 页面宽度的特定 div 形状(见附图)

Question

我对 CSS3 的掌握相当不错，但我正在进行的设计需要这样的背景:

上面的预览是为了浏览器窗口的 100% 宽度和高度，我想我应该将背景颜色设置为 #f0f0f0(最浅的灰色，一直到预览的底部)，然后我需要创建有一个点的大白色 div，并给那个投影。但我无法弄清楚如何让 div 成为完整的宽度和高度，并给底部那个 Angular/箭头点。我什至不知道从哪里开始。非常感谢任何帮助或指导。请谢谢!

Answer 1

<style>
    body { margin: 0 }
</style>
<div style="width: 100vw; height: 100vh; background-image: myimage.svg; background-position: bottom;"></div> <!--viewport width and viewport height-->

然后你只需要制作一个简单的svg。另外，您可以考虑使 svg 内联。既然我很好，在这里:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 5" fill="#ccc">
    <path d="M 0,5 L 10,0 L 20,5 Z"/>
</svg>