您好我被分配了一个棘手的任务。我需要让一个方形div到达顶部的一个点。基本上它看起来像一个方形div，顶部有一个宽三角形。看我下面的屏幕截图。顶部的深蓝色只是堆叠在白色div顶部的另一个div。

我尝试在元素之前做一个伪造的，从here创建一个三角形并将其定位在正方形的顶部。它有效，但没有响应。我需要使三角形的宽度为100％，因此它具有响应性。当缩小屏幕时，它变得很时髦，所以我决定不去这条路，因为我不想创建大量的媒体查询。

我不确定除了我尝试的伪三角形元素之外如何完成此操作，这对我不起作用，因为它没有响应。也许是一个svg元素，或者是一个倾斜的div？

有人有什么建议吗？我不一定需要有人输入代码来为我解答这个问题。我只需要有人指出我正确的方向，我可以自己编写代码。

谢谢！

我已提供a working JSFiddle（将15vw更改为顶部三角形的首选高度。

解释

我在顶部创建了一个width: 0; height: 0; div，并将其边框设置在左侧和右侧50vw（因此它占据了窗口的整个宽度）。接下来，我将底部和上部边框设置为高度15vw（我选择的三角形高度 - 如上所述，可自定义）。

我将所有边框设置为透明，除了我们想要看到的底部边框。然后我设置margin-top: -15vw;将其推到窗口的顶部（通过使用transform我们会在回流后对其进行转换，因此会在底部留下空白。）