在HTML5畫布上需要一些幫助

Question

我不是HTML css的專業人士，我有一個可以在HTML轉換的設計。 我讀過有關畫布的文章，但我不知道該如何滿足我的要求。 我搜索了很多，但沒有什么幫助。

這是我的設計：

它是一個橫幅區域，分為三個部分。

1. 橫幅圖片（汽車圖片）
2. 透明三角形div
3. 並且有導航（菜單）

我只想知道如何創建此三角形類型div因為我不知道。

因此，請給我一個有用的解決方案。 非常感謝您。

注意：它也是一個響應。

Answer 1

我的建議是將nav與旋轉的div分開，正如@krisph所說，您只需要應用一個轉換：對該div旋轉（45deg）並保持不變。 然后應用變換：在每個正方形點上旋轉（45deg）。 我猜你甚至不需要使用畫布！