標籤：.com css html 16px margin head 倒三角 set
使用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繪製三角形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
