CSS 矩形斜切是一種常見的樣式技巧,它可以讓矩形變得斜向。這種效果很常見于設計和排版中,特別是在大標題、圖形和文本框中。通過 CSS 的 transform 屬性,我們可以很容易地實現這種效果。讓我們看看如何使用這種技術創建一個斜切的矩形。
.slanted-rectangle { width: 300px; height: 200px; position: relative; overflow: hidden; } .slanted-rectangle:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #428bca; transform: skew(-20deg); transform-origin: top left; } .slanted-rectangle p { position: relative; z-index: 1; color: #FFF; padding: 20px; font-size: 24px; }
首先,我們需要創建一個包含內容的容器,并將其設置為相對定位和 overflow:hidden。然后,我們使用:before 偽類為容器創建一個絕對定位元素。在這個元素上,我們將使用 transform 屬性中的 skew() 函數創建斜切效果。我們指定一個負的度數來向左傾斜矩形。通過 transform-origin 屬性,我們可以將變形的原點設置在左上角。
最后,我們在容器內添加一個段落元素,并將其設置為相對定位,以便在絕對定位的容器下居中。我們設置了一個z-index值,以便將它放在矩形前面。我們還應用了一些樣式,使文本更容易閱讀。
在以上代碼的基礎上,您可以嘗試使用其他度數值和不同的顏色,以創建一個適合您需要的斜角矩形。