📜  如何使用 HTML 和 CSS 创建国际象棋图案背景?

📅  最后修改于: 2021-10-29 06:02:41             🧑  作者: Mango

国际象棋模式只是游戏中经常出现的某些战术位置。使用 CSS 的伪选择器可以轻松设计。这种类型的图案可用于制造令人困惑的错觉。

方法:方法是使用重复线性渐变属性来创建一个图案,该图案将重复到定义的高度和宽度。

HTML 代码:在本节中,我们将设计国际象棋模式的基本结构。

HTML


  

    Chess Pattern

  

    
  


CSS


HTML


  

    Chess Pattern

  

  

    
  


HTML


  

    Chess Pattern
  
    

  

    
  


CSS 代码:对于 CSS,请按照以下给出的步骤操作。

  • 步骤1:将div的位置设置为fixed并应用一些高度和宽度。
  • 第2步:现在使用before选择器并应用重复线性渐变属性,黑白颜色和角度设置为45度。
  • 第 3 步:现在在选择器之后使用与之前使用的属性相同的选择器,只需将角度更改为 -45 度。
  • 步骤4:将混合模式设置为差异,使其可以叠加在背景上。

提示:您还可以使用前 0 度和后 90 度来制作完美的方形国际象棋,如盒子。下面也将附上相同的输出。

CSS


完整代码:(45度角和-45度角):结合以上两段代码来设计一个棋盘。

HTML



  

    Chess Pattern

  

  

    
  

输出:

使用角度为 45 度和 -45 度时:

完整代码:(角度为0度和90度)是以上两段代码的组合。

HTML



  

    Chess Pattern
  
    

  

    
  

使用角度为 0 度和 90 度时: