📜  如何使用 CSS 创建自定义横幅背景?

📅  最后修改于: 2021-09-01 02:30:59             🧑  作者: Mango

在现代网页设计中,自定义背景已成为横幅背景的流行设计。自定义背景有无数种设计。设计纯粹是基于一个人的想象力和创造力。自定义背景的一些常见示例包括波浪背景、倾斜背景等。

本文将展示用于创建 Sawblade 背景的方法,因为它的底部类似于锯的底部。它也被称为锯齿形图案。

方法:方法是先在底部创建一串小三角形,然后沿X轴旋转它们,使它们形成刀片状外观。

HTML 代码:在 HTML 部分,创建了

元素,用于保存模式。

HTML


  
    Custom background
  


  
  


CSS


HTML

  

    
        Custom background
    
    

  

    
    
  


CSS 代码:可以使用以下步骤定义 CSS:

  • 第 1 步:为正文提供基本的背景颜色。
  • 第 2 步:将创建的 div 与选择的不同背景颜色居中对齐。
  • 第 3 步:使用 before 选择器,通过使用线性梯度属性创建一个小的三角形链,具有相同的度数,但保持其中一个为负。
  • 第 4 步:使用 rotate()函数在 X 轴上旋转三角形。

CSS


完整代码:在本节中,我们将结合以上两节使用 HTML 和 CSS 制作自定义横幅背景。

HTML


  

    
        Custom background
    
    

  

    
    
  

输出: