三角形绘制方法（及其它图形）

1.使用boder来绘制

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div {
 8                width: 0;
 9                height: 0;
10                margin: 50px;
11                /*这里boder的设置方向都是上 左右 下 */
12                border-style: solid;
13                border-color: transparent transparent blueviolet;
14                border-width:0 100px 100px;
15             }
16         </style>
17     </head>
18     <body>
19         <div></div>
20     </body>
21 </html>

绘制结果：

2.绘制带边框的三角形

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div {
 8                width: 0;
 9                height: 0;
10                margin: 50px;
11                /*这里boder的设置方向都是上 左右 下 */
12                border-style: solid;
13                border-color: transparent transparent blueviolet;
14                border-width:0 100px 100px;
15                position: relative;
16             }
17             div::after {
18                 content: '';
19                 position: absolute;
22                 border-style: solid;
23                 border-color: transparent transparent #ffff7f;
24                 border-width:0 95px 95px;
25                 left: -95px;
26                 top: 3px;    
27             }
28         </style>
29     </head>
30     <body>
31         <div></div>
32     </body>
33 </html>

绘制结果：

3.箭头

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div {
 8                width: 0;
 9                height: 0;
10                margin: 50px;
11                /*这里boder的设置方向都是上 左右 下 */
12                border-style: solid;
13                border-color: transparent transparent blueviolet;
14                border-width:0 100px 100px;
15                position: relative;
16             }
17             div::after {
18                 content: '';
19                 position: absolute;
20                 border-style: solid;
21                 border-color: transparent transparent #ffffff;
22                 border-width:0 95px 95px;
23                 left: -95px;
24                 top: 5px;    
25             }
26         </style>
27     </head>
28     <body>
29         <div></div>
30     </body>
31 </html>

绘制结果：

4.使用span标签来绘制，这个方法其实比较简便，你可以仿照三角形这个来绘制很多图形，从你的输入法中获取到图形的图案，实在不行网上也是一堆符号

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .trangle {
 8                 font-size: 200px;
 9                 color: #6495ED;
10             }
11         </style>
12     </head>
13     <body>
14         <span class="trangle">▲</span>
15     </body>
16 </html>

绘制结果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <canvas id="triangle" height="100" width="100">Triangle</canvas>
 9     </body>
10     <script>
11     var canvas = document.getElementById('triangle');
12     var context = canvas.getContext('2d');
13     
14     context.beginPath();
15     context.moveTo(0, 0);
16     context.lineTo(100, 0);
17     context.lineTo(50, 100);
18     
19     context.closePath();
20     
21     context.fillStyle = "rgb(78, 193, 243)";
22     context.fill();
23     </script>
24 </html>

5.使用canvas绘制，canvas

6.绘制圆形

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1 {
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: #6495ED;
11                 border-radius: 100px;
12             }
13         </style>
14     </head>
15     <body>
16         <div id="div1"></div>
18     </body>
19 </html>

绘制结果：

只要你的radius的长度是你div的一半就行了