使用CSS 建立傾斜背景
問題:
您希望建立一個傾斜的背景背景,如提供的圖像所示。您目前的CSS實現沒有達到預期的效果。
解決方案:
要實現傾斜的背景,您可以使用帶有傾斜變換的偽元素:
body { height: 100vh; margin: 0; background: yellow; } body:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300px; background: #000; transform: skew(-30deg); transform-origin: top; }
此技術建立一個位於視口左上角的傾斜元素。透過控制元素的寬度和傾斜角度,您可以根據您的要求自訂傾斜。
以上是如何使用 CSS 建立傾斜背景?的詳細內容。更多資訊請關注PHP中文網其他相關文章!