巧用CSS绘制各种三角形

悲酥清风
悲酥清风
悲酥清风
826
文章
55
评论
CSS评论4,472,5991阅读模式

下面是一些利用CSS中border的特性绘制的各种角度的三角形：

1、正方形巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  8.         width : 0;
  9.         height: 0;
  10.         border-left: 50px solid gray;
  11.         border-right : 50px solid green;
  12.         border-bottom: 50px solid red;
  13.         border-top : 50px solid yellow;
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="triangle"></div>
  19. </body>
  20. </html>

如上图1，由于设置了width、height都为0了，所以四个点也就归并成了一个点，后面的各种角度的三角形，其实也就是不断调整那个中心点而已。

2、向上三角巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  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 id="triangle"></div>
  18. </body>
  19. </html>

3、向下三角巧用CSS绘制各种三角形

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  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 id="triangle"></div>
  18. </body>
  19. </html>

4、向左三角巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  8.         width : 0;
  9.         height: 0;
  10.         border-right: 100px solid red;
  11.         border-top : 50px solid transparent;
  12.         border-bottom: 50px solid transparent;
  13.     }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="triangle"></div>
  18. </body>
  19. </html>

5、向右三角巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  8.         width : 0;
  9.         height: 0;
  10.         border-left: 100px solid red;
  11.         border-top : 50px solid transparent;
  12.         border-bottom: 50px solid transparent;
  13.     }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="triangle"></div>
  18. </body>
  19. </html>

6、左上三角巧用CSS绘制各种三角形

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  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 id="triangle"></div>
  17. </body>
  18. </html>

7、右上三角巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  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 id="triangle"></div>
  17. </body>
  18. </html>

8、左下三角巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>index</title>
  6. <style type="text/css">
  7.     #triangle {
  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 id="triangle"></div>
  17. </body>
  18. </html>

9、右下三角巧用CSS绘制各种三角形

代码如下：

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>index</title>  
  6. <style type="text/css">  
  7.     #triangle {  
  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 id="triangle"></div>  
  17. </body>  
  18. </html>  

悲酥清风
  • 本文由 发表于 2015年10月8日 22:02:20

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定