如何將CSS傾斜的容器分3個步驟

最近更新個人作品集時，想在網站主要佈局中使用斜線(/) 作為視覺元素。之前從未嘗試過在CSS 中創建傾斜容器，但乍一看似乎很容易。然而，當我深入研究時，實際上要創建支持文本和媒體的有效CSS 斜角容器，面臨一些非常有趣的挑戰。

以下是我的嘗試過程和最終成果：

我首先尋找允許文本自然在其內部流動的非矩形容器示例。我假設這可以用CSS 實現，因為像Adobe Illustrator 和Microsoft Word 等程序多年來一直在這樣做。

步驟1：使用轉換創建CSS 斜角容器

我找到了CSS Shapes 模塊，如果我們使用shape-outside 屬性，它非常適合簡單的文本內容。它甚至可以完全對齊文本。但它不能讓內容在容器內部滾動。因此，當用戶向下滾動時，整個傾斜容器似乎向左移動，這並非我想要的效果。相反，我採用了一種更簡單的方法，即向容器添加transform: skew() 。

 .slant-container {
  transform: skew(14deg);
}

這是一個良好的開端！容器確實傾斜了，並且滾動按預期工作，而純CSS 處理了圖像的大小調整。然而，顯而易見的問題是文本和圖像也傾斜了，使內容更難以閱讀，圖像也失真了。

步驟2：反向傾斜字體

我嘗試了幾種方法來解決CSS 中傾斜文本和圖像的問題，但最終想出了一個更簡單的解決方案：使用FontForge 創建一個新的字體來反向文本的傾斜。

FontForge 是一個開源字體編輯器。我為網站的主要內容選擇了Roboto Condensed Light，所以我下載了.ttf 文件並在FontForge 中打開它。在那裡，我選擇了所有字形，並應用了14deg 的傾斜來補償容器上的CSS 轉換引起的傾斜。我將新字體文件保存為Roboto-Rev-Italic.ttf，並在我的樣式表中調用它。

就是這樣。現在字體以與容器傾斜相同的量向相反方向傾斜，從而抵消了這些影響，使內容看起來像我最初使用的普通Roboto 字體。

步驟3：優化圖像和視頻

這對於文本非常有效！選擇文本的功能也正常。從那裡，我只需要使用負skew()值反向傾斜塊級圖像和視頻元素，以抵消應用於容器的值：

 img,
video {
  transform: skew(-14deg);
}

不過，我確實最終將圖像和視頻包裝在額外的div 中。這樣，我可以為它們提供漂亮的背景，這些背景似乎與容器完美地對齊。我所做的是連接到::after偽元素，並使用超出傾斜容器左右邊緣的背景對其進行定位。

 img::after,
video::after {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

最終演示

這是最終演示：

我現在在我的個人網站上使用此效果，到目前為止非常喜歡它。但是您是否嘗試過其他方法來實現類似的效果？請務必在評論中告訴我，以便我們進行比較！

以上是如何將CSS傾斜的容器分3個步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！