CSS实现三角形的四种方法

方法一：利用 border (常见)

【表明】不设置宽高，用边框巨细控制三角型巨细
【分解步调】

• 设置一个div不设宽高
  【示例】
  

1. <style>
2.     #triangle{
3.         width: 0;
4.         height: 0;
5.         border: 100px solid;
6.         border-color: orangered skyblue gold yellowgreen;
7.     }
8. </style>

复制代码

 
2. 设置透明

• 留下想要指向方向相反的边框设定，其他方向的边框设为transparent透明
  

【示例】实现指向向上的三角形

1. <style>
2.     .Up{
3.         width: 0;
4.         height: 0;
5.         border-top: 100px solid transparent;
6.         border-right: 100px solid transparent;
7.         border-left: 100px solid transparent;
8.         border-bottom: 100px solid orangered;
9.     }
10. </style>

复制代码

【结果图】指向上，指向下，指向左，指向右

 
怎样设置差别的三角形

• 可以通过调解差别方向边框的值来实现差别方向和巨细的三角形
  

方法二：利用 linear-gradient

【表明】两色渐变，调为实色，一色透明
【分解步调】

• 两色渐变
  

1. <style>
2.     .first{
3.         background: linear-gradient(45deg, deeppink, yellowgreen);
4.     }
5. </style>

复制代码

• 调为实色
  

1. <style>
2.     .second{
3.         background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
4.     }
5. </style>

复制代码

• 一色透明
  

1. <style>
2.     .second{
3.         background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
4.     }
5. </style>

复制代码

【结果图】

 
怎样设置差别的三角形

• 通过旋转 rotate 大概 scale，也能得到各种角度，差别巨细的三角形
  

方法三：利用 clip-path

【表明】裁剪多边型的方式，创建元素的可表现地域。地域内的部分表现，地域外的埋伏。
【示例】

1. <style>
2.     div{
3.         width: 100px;
4.         height: 100px;
5.         background: gold;
6.         clip-path: polygon(0 0, 0 100%, 100% 100%);
7.     }
8. </style>

复制代码

clip-path：

• polygon(x1 y1，x2 y2，x3 y3)；
  

相识更多clip-path属性
【结果图】

 
怎样设置差别的三角形

• 可以借助CSS clip-path maker
  

方法四：利用字符

三角形形状的字符的十进制 Unicode 表现码

1. <div class="one">&#9658; </div>
2. <div class="two">&#9660; </div>
3. <div class="three">&#9650; </div>
4. <div class="four">&#8895; </div>
5. <div class="five">&#9651; </div>

复制代码

 
【留意】用font-size控制巨细，用color控制颜色

空心三角形怎样实现：

 当div元素嵌套时可设置出空心三角形或是带三角形的气泡框。实比方下：

 
实现的核心头脑
空心三角形

同样是利用三角形，加上伪类选择器before或after。before或after里计划一个三角形，此中一个配景颜色与环境颜色类似（一样平常为白色），用白色的三角形粉饰住另一个三角形即可到达三角形空心的目的。
留意：粉饰过程一样平常利用定位，容器设置为相对定位（不脱离文档流），三角形设置绝对定位。通过top,left,bottom,right调解位置即可。
这时为了到达粉饰结果，应利用z-index设置使配景致三角形可以或许粉饰另一个三角形。
带三角形的气泡框
本例现实可拆分为一个盒子和一个空心三角形。这时可同时设置before和after。各自设置好边框构成三角形相互粉饰即可到达结果。
气泡框：

1. <!DOCTYPE html>
2. <html lang="zn-ch">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>CSDN测试-实现带三角形的气泡框</title>
8.     <style>
9.     .div{
10.         width:300px;
11.         height:300px;
12.         border: 10px solid #0082df;
13.         position: relative;
14.     }
15.     .div::after{
16.         content: "";
17.         position: absolute;
18.         right:60px;
19.         top:300px;
20.         width:0px;
21.         height:0px;
22.         border:30px solid transparent;
23.         border-top: 30px solid #0082df;
24.     }
25.     .div::before{
26.         content: "";
27.         position: absolute;
28.         top:295px;
29.         left:180px;
30.         z-index: 1;
31.         width:0px;
32.         height: 0px;
33.         border: 30px solid transparent;
34.         border-top:30px solid #fff;  
35.     }
36.     </style>
37. </head>
38. <body>
39.    <div class="div">
40.    </div>
41. </body>
42. </html>

复制代码

空心三角形：

1. <!DOCTYPE html>
2. <html lang="zn-ch">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>CSDN测试专用-实现空心三角形</title>
8.     <style>
9.     .div{
10.         width:0px;
11.         height:0px;
12.         border: 100px solid transparent;
13.         border-bottom-color: #0082df;
14.         position: relative;
15.     }
16.     .div::after{
17.         content: "";
18.         position: absolute;
19.         right:-100px;
20.         top:-80px;
21.         width:0px;
22.         height:0px;
23.         border:100px solid transparent;
24.         border-bottom-color: #fff ;
25.         z-index: 2;
26.     }
27.     </style>
28. </head>
29. <body>
30.    <div class="div">
31.    </div>
32. </body>
33. </html>

复制代码