html - 可以使 div 到达顶部的某个点吗？必须 react 灵敏

Question

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

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

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

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

谢谢!

Answer 1

我提供了 a working JSFiddle (将 15vw 更改为顶部三 Angular 形的首选高度)。

---

解释

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

除了我们希望看到的底部边框外，我将所有边框设置为透明。然后我设置 margin-top: -15vw; 将它推到窗口的顶部(通过使用 transform 我们会在回流后转换它，因此会在底部)。