系列文章目录

CSS3实现半透明边框（1）
CSS3实现多重边框（2）
CSS3如何调整背景图片大小（3）
CSS3背景定位（4）
CSS3设置条纹背景（5）

使用CSS实现国际象棋棋盘

系列文章目录
前言
一、直角三角形
- 拼成正方形
二、使用步骤
- 1.完整代码
- 2.棋盘效果图
总结

前言

如何使用CSS实现国际象棋棋盘，开门见山：用两个直角三角形拼接出我们想要的方块，进而实现国际象棋棋盘。

一、直角三角形

假设有长400px，宽400px的元素

width: 400px;
height: 400px;

在元素中可以通过background-image来实现直角三角形，linear-gradient在CSS3设置条纹背景中使用过，下列代码45度的线性渐变，黑色三角形占整个背景的25%

background-image: linear-gradient(45deg,black 25%,transparent 0);

反过来的直角三角形呢？也很好实现，代码如下：

background-image: linear-gradient(45deg,transparent 75%,black 0);

上述两行代码结合，可以得到这样的一张图

设置background-size: 100px 100px;
效果如下：

拼成正方形

注意这只是象棋棋盘的一半。

background-image:linear-gradient(45deg,black 25%,transparent 0),linear-gradient(45deg,transparent 75%,black 0);
background-position: 0 0,50px 50px;
background-size: 100px 100px;

将整个正方形复制一份，然后最后再做多一层上面的效果，然后移动一下其中一层的位置，将红色部分移动到蓝色部分。即可实现国际象棋棋盘。

二、使用步骤

1.完整代码

width: 400px;
height: 400px;
background:linear-gradient(45deg,black 25%,transparent 0),linear-gradient(45deg,transparent 75% ,black 0),linear-gradient(45deg,black  25%,transparent 0),linear-gradient(45deg,transparent 75% ,black 0);
background-position: 0 0,50px 50px,50px 50px, 100px 100px;
background-size: 100px 100px;

2.棋盘效果图

总结

通过两个直角三角形拼接出我们想要的方块，但是这本质上只是棋盘的一半，想要得到完整的棋盘只需要把这组重复一份，创建出另一组正方形，并且偏移它们的位置，即可实现国际象棋棋盘。

使用CSS实现国际象棋棋盘相关推荐

JQuery实现简单的国际象棋棋盘
介于网上没有简单的JQuery的国际象棋棋盘在此写了一个,供大家参考 <!DOCTYPE html> <html><head lang="en"> ...
javascript简单写出国际象棋棋盘
关于昨天的一个作业,做了一个国际象棋的棋盘,效果图如下这里的思路是根据off=true的值进行反转来判断单元格的颜色. 就那第一行来说,当条件语句if的off=true则输出str+='<td ...
LeetCode简单题之判断国际象棋棋盘中一个格子的颜色
题目给你一个坐标 coordinates ,它是一个字符串,表示国际象棋棋盘中一个格子的坐标.下图是国际象棋棋盘示意图. 如果所给格子的颜色是白色,请你返回 true,如果是黑色,请返回 false ...
棋盘代码_【案例】绘制国际象棋棋盘？（turtle 登场）
案例介绍今天我们来用 turtle 画一个国际象棋棋盘,大小为 8x8. 国际象棋棋盘 turtle 绘图(海归绘图)很适合用来引导孩子学习编程,请想象绘图区有一只机器海龟,起始位置在 x-y 平 ...
LeetCode 1812. 判断国际象棋棋盘中一个格子的颜色
文章目录 1. 题目 2. 解题 1. 题目给你一个坐标 coordinates ,它是一个字符串,表示国际象棋棋盘中一个格子的坐标.下图是国际象棋棋盘示意图. 如果所给格子的颜色是白色,请你返回 ...
python画国际象棋_python图形工具turtle绘制国际象棋棋盘
本文实例为大家分享了python图形工具turtle绘制国际象棋棋盘的具体代码,供大家参考,具体内容如下 #编写程序绘制一个国际象棋的棋盘 import turtle turtle.speed(30) ...
python输出国际象棋棋盘_python输出国际象棋棋盘的实例分享
国际象棋是当今国际上最流行的智力体育运动项目.青年人下棋可以锻炼思维.增强记忆力和培养坚强的意志:中年人下棋可以享受美学:老年下棋可以很好的休息娱乐.国际象棋游戏有自己的规则,需要两个人将棋子落在棋盘 ...
python打印国际象棋规则口诀_python输出国际象棋棋盘的实例分享
国际象棋是当今国际上最流行的智力体育运动项目.青年人下棋可以锻炼思维.增强记忆力和培养坚强的意志:中年人下棋可以享受美学:老年下棋可以很好的休息娱乐.国际象棋游戏有自己的规则,需要两个人将棋子落在棋盘 ...
python绘制国际象棋_python使用turtle绘制国际象棋棋盘
本文实例为大家分享了python使用turtle画国际象棋棋盘的具体代码,供大家参考,具体内容如下使用的方法是每一个小格每一个小格的画 import turtle for i in range(8) ...
java国际象棋棋牌_java使用swing绘制国际象棋棋盘
本文实例为大家分享了java使用swing绘制国际象棋棋盘的具体代码,供大家参考,具体内容如下 1.完整代码 import java.awt.Color; import java.awt.Point; ...

使用CSS实现国际象棋棋盘

系列文章目录

使用CSS实现国际象棋棋盘

前言

一、直角三角形

拼成正方形

二、使用步骤

1.完整代码

2.棋盘效果图

总结

使用CSS实现国际象棋棋盘相关推荐

最新文章

热门文章