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

📅  最后修改于: 2021-08-30 10:07:03             🧑  作者: Mango

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

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

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

元素。



  

    Skewed Background

  

    
        

GeeksforGeeks

    
    
  

CSS 代码:

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

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

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


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



  

    Skewed Background
  
    

  

    
        

GeeksforGeeks

    
    
  

输出: