css 画三角形，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

README.md

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

            
            <!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
    }

    .triangle {
      width: 0;
      height: 0;
    }

    /* 直角三角形 */
    .triangle-up {
      border-right: 50px solid transparent;
      border-bottom: 100px solid #3498db;
    }

    /* 向下三角形 */
    .triangle-down {
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid #e74c3c;
    }

    /* 向左三角形 */
    .triangle-left {
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-right: 100px solid #2ecc71;
    }

    /* 向右三角形 */
    .triangle-right {
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 100px solid #f39c12;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="triangle triangle-up"></div>
    <div class="triangle triangle-down"></div>
    <div class="triangle triangle-left"></div>
    <div class="triangle triangle-right"></div>
  </div>

</body>

</html>

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

README.md

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

            
            # HTML/JS/CSS 项目模板

笔COOL提供的基础HTML项目，样式、脚本分离到单独的文件

## 用途

- 想要简单练习 HTML
- 快速预览AI生成的 HTML 
- 展示自己的 HTML 作品

## 文件

- **index.html**： 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
- **sytle.css**： 样式文件
- **index.js**： 脚本文件

你可以自行添加更多的文件

## 内容
项目介绍
- 通过 `<link rel="stylesheet" href="./style.css">` 引入样式文件
- 通过 `<script src="./index.js"></script>` 引入脚本文件
- 页面显示标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来。"，一个 HTML 图标
- 控制台输出 `["Hello 笔.COOL 控制台"]`，用于展示控制台能力

## 模板使用

- 首页点击 **创建项目**，选择 **新建 HTML/JS/CSS 项目** 即可使用该模板

- 或访问 https://bi.cool/project 即可快速进入此模版

预览

控制台