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的一半就行了