可能會讓div來到頂部？必須有迴應

Question

你好，我已被分配一個棘手的任務。我需要做一個方形的div來到頂端。基本上它會看起來像一個廣場的頂部廣泛的三角形。看到我的屏幕截圖如下。頂部的深藍色只是堆疊在白色div上的另一個div。

伊夫試圖這樣做一個僞元件之前從here創建三角形和正方形的頂部定位它。它的工作原理，但沒有響應。我需要使三角形寬度達到100％，因此響應速度很快。當縮小屏幕時，它變得時髦，所以我決定不走這條路線，因爲我不想創造大量的媒體查詢。

我不確定如何做到這一點，而不是我嘗試過的psuedo三角形元素，這對我不起作用，因爲它沒有響應。也許一個svg元素，或者是一個傾斜的div？

任何人有任何建議嗎？我不一定需要有人輸入代碼來爲我回答這個問題。我只需要有人指出我正確的方向，我可以自己編寫代碼。

謝謝！

Answer 1

我提供了a working JSFiddle（將15vw更改爲頂部三角形的首選高度）。

---

解釋

我已經在上面創建了一個width: 0; height: 0; DIV並設置它的邊框上在左側和上50vw權（所以它佔用窗口的整個寬度）。接下來，我將底部和上部邊框設置爲高度爲15vw（我選擇的三角形高度 - 如上所述，可自定義）。

我將所有的邊框設置爲透明，除了我們希望看到的底部邊框。然後我設置margin-top: -15vw;將它推到窗口的頂部（通過使用transform，我們將在迴流後對其進行轉換，並因此將空白留在底部）。