CSS三角
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .d1{ 9 /* 宽度 和 高度 必须设置成 0 */ 10 width: 0; 11 height: 0; 12 /* 第一个参数的数值越大，代表三角形越大 13 第三个参数是设置透明色 */ 14 border: 50px solid transparent; 15 /* 这个属性指定的是三角形的方向 */ 16 border-top-color:red ; 17 } 18 .d2{ 19 /* 宽度 和 高度 必须设置成 0 */ 20 width: 0; 21 height: 0; 22 /* 第一个参数的数值越大，代表三角形越大 23 第三个参数是设置透明色 */ 24 border: 100px solid transparent; 25 /* 这个属性指定的是三角形的方向 */ 26 border-bottom-color:rosybrown ; 27 } 28 .d3{ 29 /* 宽度 和 高度 必须设置成 0 */ 30 width: 0; 31 height: 0; 32 /* 第一个参数的数值越大，代表三角形越大 33 第三个参数是设置透明色 */ 34 border: 30px solid transparent; 35 /* 这个属性指定的是三角形的方向 */ 36 border-left-color:rgb(192, 78, 177) ; 37 } 38 .d4{ 39 /* 宽度 和 高度 必须设置成 0 */ 40 width: 0; 41 height: 0; 42 /* 第一个参数的数值越大，代表三角形越大 43 第三个参数是设置透明色 */ 44 border: 80px solid transparent; 45 /* 这个属性指定的是三角形的方向 */ 46 border-right-color:rgb(78, 196, 63) ; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="d1"></div> 52 <div class="d2"></div> 53 <div class="d3"></div>' 54 <div class="d4"></div> 55 </body> 56 </html>
