CSS3 - 帮助创建两个100％页宽的特定div形状（参见附图）

Question

我很好地掌握了CSS3，但我正在开发一个需要这样背景的设计：

上面的预览是100％宽度和浏览器窗口的高度，我想我将背景颜色设置为＃f0f0f0（最轻的灰色，一直到预览的底部），然后我需要创建一个有点的大白色div，并给出那个投影。但是我无法弄清楚如何将div设置为全宽和高度，并给出角度/箭头指向的底边。我甚至不知道从哪里开始。非常感谢任何帮助或指导。请＆amp;谢谢！

Answer 1

我认为你正在寻找像塑形div的东西。检查此链接（http://css-tricks.com/examples/ShapesOfCSS/）。它有你可以用来塑造div的CSS。

Answer 2

<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>