如何使用 CSS 创建倾斜的背景？

倾斜的背景设计模式用作网站首页上的横幅。它使网站看起来更自然和令人愉悦。使用 CSS 前后选择器和使用 skew函数可以轻松创建倾斜的背景。

方法：方法很简单。我们将使用带有前后选择器的 skew函数将我们的边界线变成二维平面。左侧部分将使用 before 选择器完成，右侧部分将使用 after 选择器完成。您还可以通过在左侧使用 after 选择器并在右侧使用 before 选择器来更改顺序。

HTML 代码： HTML 代码用于设计网页的基本结构。以下代码包含两个带有 id 属性的

元素。

  

    

  

    

        
GeeksforGeeks
    
    


  

CSS 代码：

• 第一步：首先为两个部分都提供背景，设置宽度为100%，高度可以根据需要设置。
• 第 2 步：现在，在底部使用 before 选择器并将其宽度减小到 50%，因为我们希望边框从中心倾斜。高度可根据需要设置。然后使用 skew函数将其转换为特定角度的二维平面。
• 第三步：重复第二步，从左到右改变偏斜度。

下面的代码将显示上述步骤的实现。

提示：您可以使用检查功能选择倾斜度，并通过它调整度数以获得完美的角度。

完整代码：是以上两部分的组合，创建了一个倾斜的背景。

  

    
  
    

  

    

        
GeeksforGeeks
    
    


  

输出：