【CSS】手把手教你用CSS画三角形

偏执的太偏执、 2022-04-18 02:30 358阅读 0赞

用到的html代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        body {
          padding: 100px;
        }
      </style>
    </head>
    <body>
      <div class="triangle">
        
      </div>
    </body>
    </html>

咋们先给div一个简单的效果：

.triangle {
          width: 20px;
          height: 20px;
          background-color: black;
          border: 10px solid red;
        }

![在这里插入图片描述][2018110711192132.png]

接下来让div的四个边拥有不同的颜色

.triangle {
          width: 20px;
          height: 20px;
          background-color: black;
          border: 10px solid red;
          border-top-color: aqua;
          border-left-color: blueviolet;
          border-right-color: chartreuse;
        }

于是有下面的效果：  
![在这里插入图片描述][20181107112209777.png]

可以看到四个border都变成了梯形

现在我们想一下梯形和三角形的关系

梯形的上底面的宽度为0就是三角形！！！！

而图中黑色的宽高就是梯形的上底面！！

于是把div的宽高设为0，再把背景颜色去掉就有：

.triangle {
          width: 0;
          height: 0;
      
          border: 10px solid red;
          border-top-color: aqua;
          border-left-color: blueviolet;
          border-right-color: chartreuse;
        }

![在这里插入图片描述][20181107112947698.png]

想用哪个三角形，只需要把其他三角形的border颜色设为透明（ border-right-color：transparent）

比如：

.triangle {
          width: 0;
          height: 0;
          border: 10px solid red;
          border-top-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }

效果：  
![在这里插入图片描述][20181107113406228.png]

还有最后一个问题：我们有时候需要这样（紫色或者绿色）的三角形，如何实现这样的一个效果呢？  
![在这里插入图片描述][20181107115007214.png]

可以先思考一下~

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

经过思考可以发现，这个三角形实际上被一刀切成了两半，我们只需要把border-top的宽度设为0，只留下border-bottom的宽度即可实现

代码如下：

.triangle {
          width: 0;
          height: 0;
          background-color: black;
          border: 10px solid red;
          border-top-color: aqua;
          border-left-color: blueviolet;
          border-right-color: chartreuse;
          border-top-width: 0;
        }

[2018110711192132.png]: /images/20220418/c9bcbfe935854690827fe1b9cfbf1d5c.png
[20181107112209777.png]: /images/20220418/0c9ecc77401d4803b0d9cea5a908b7b5.png
[20181107112947698.png]: /images/20220418/011cf730914b4f2ebca53754422dfc35.png
[20181107113406228.png]: /images/20220418/03704437fb72474589f903a505f5a24a.png
[20181107115007214.png]: /images/20220418/3d94eeec06e24cbca137c5d525919e07.png