一.新建一个index.html和index.css文件
二.打开index.html写入以下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绘制三角形</title> <link rel="stylesheet" href="./index.css"> <!-- 引入index.css --> </head> <body> <div class="all"> <div class="triangle1"></div> <div class="triangle2"></div> <div class="triangle3"></div> <div class="triangle4"></div> <div class="triangle5"></div> <div class="triangle6"></div> <div class="triangle7"></div> <div class="triangle8"></div> </div> </body> </html>
三.打开index.css写入以下代码
.all{ display: flex; justify-content: space-around; } .triangle1 { border-bottom: 40px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; width: 0px; height: 0px; } .triangle2 { border-bottom: 40px solid transparent; border-right: 40px solid red; width: 0px; height: 0px; } .triangle3 { border-top: 40px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; width: 0px; height: 0px; } .triangle4 { border-top: 40px solid transparent; border-left: 40px solid red; width: 0px; height: 0px; } .triangle5 { border-top: 40px solid red; border-right: 40px solid transparent; width: 0px; height: 0px; } .triangle6 { border-left: 40px solid transparent; border-bottom: 40px solid red; width: 0px; height: 0px; } .triangle7 { border-left: 40px solid red; border-bottom: 20px solid transparent; border-top: 20px solid transparent; width: 0px; height: 0px; } .triangle8 { border-right: 40px solid red; border-bottom: 20px solid transparent; border-top: 20px solid transparent; width: 0px; height: 0px; }
四. 这样我们就可以看见一个三角形
