首页 > 代码库 > 纯CSS绘制三角形
纯CSS绘制三角形
使用CSS绘制三角形
正三角形的绘制：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0;10 border-left: 50px solid transparent;11 border-right: 50px solid transparent;12 border-bottom: 100px solid red;13 }14 </style>15 </head>16 <body>17 <div style="margin-bottom: 8px">triangle-up</div>18 <div id="triangle-up"></div>19 </body>20 </html>效果图：
倒三角绘制：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>倒三角形</title> 6 <style type="text/css"> 7 #triangle-down { 8 width: 0; 9 height: 0;10 border-left: 50px solid transparent;11 border-right: 50px solid transparent;12 border-top: 100px solid red;13 }14 </style>15 </head>16 <body>17 <div style="margin-bottom: 8px">triangle-down</div>18 <div id="triangle-down"></div>19 </body>20 </html>效果图：
左三角形绘制：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左三角形</title> 6 <style type="text/css"> 7 #triangle-left { 8 width: 0; 9 height: 0;10 border-top: 50px solid transparent;11 border-right: 100px solid red;12 border-bottom: 50px solid transparent;13 }14 </style>15 </head>16 <body>17 <div style="margin-bottom: 8px">triangle-left</div>18 <div id="triangle-left"></div>19 </body>20 </html>效果图：
右三角形绘制：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>右三角形</title> 6 <style type="text/css"> 7 #triangle-right { 8 width: 0; 9 height: 0;10 border-top: 50px solid transparent;11 border-left: 100px solid red;12 border-bottom: 50px solid transparent;13 }14 </style>15 </head>16 <body>17 <div style="margin-bottom: 8px">triangle-right</div>18 <div id="triangle-right"></div>19 </body>20 </html>效果图：
直角三角形（左上角）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>直角三角形（左上角）</title> 6 <style type="text/css"> 7 #triangle-topleft { 8 width: 0; 9 height: 0;10 border-top: 100px solid red;11 border-right: 100px solid transparent;12 }13 </style>14 </head>15 <body>16 <div style="margin-bottom: 8px">triangle-topleft</div>17 <div id="triangle-topleft"></div>18 </body>19 </html>效果图：
直角三角形（右上角）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>直角三角形（右上角）</title> 6 <style type="text/css"> 7 #triangle-topright { 8 width: 0; 9 height: 0;10 border-top: 100px solid red;11 border-left: 100px solid transparent;12 }13 </style>14 </head>15 <body>16 <div style="margin-bottom: 8px">triangle-topright</div>17 <div id="triangle-topright"></div>18 </body>19 </html>效果图：
直角三角形（左下角）:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>直角三角形（左下角）</title> 6 <style type="text/css"> 7 #triangle-bottomleft { 8 width: 0; 9 height: 0;10 border-bottom: 100px solid red;11 border-right: 100px solid transparent;12 }13 </style>14 </head>15 <body>16 <div style="margin-bottom: 8px">triangle-bottomleft</div>17 <div id="triangle-bottomleft"></div>18 </body>19 </html>效果图：
直角三角形（右下角）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>直角三角形（右下角）</title> 6 <style type="text/css"> 7 #triangle-bottomright { 8 width: 0; 9 height: 0;10 border-bottom: 100px solid red;11 border-left: 100px solid transparent;12 }13 </style>14 </head>15 <body>16 <div style="margin-bottom: 8px">triangle-bottomright</div>17 <div id="triangle-bottomright"></div>18 </body>19 </html>效果图：
结束语：
周末了，本来想好好休息一下的，可是又不知道休息干什么，就把平时用到的一些东东总结一下吧，方便他人也方便自己。
纯CSS绘制三角形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。