咱们不画饼！进来教你画三角形。。。

ゝ一纸荒年。 2022-12-22 09:43 129阅读 0赞

### 前言 ###

先来两个案列吧，

![20201119152610236.png][]                ![20201119152612575.png][]

### 原理 ###

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

### **实现** ###

**Triangle Up**

![e0222e5e04f6be594ebf12f0f13922e6.png][]

#triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }

**Triangle Down**

![b818b6668589530aab26db39a2e30a4c.png][]

#triangle-down {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }

**Triangle Left**

![1fceba356b941abe35ba92242dba3c6c.png][]

#triangle-left {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;
        border-bottom: 50px solid transparent;
    }

**Triangle Right**

![32ff59f44e3e932d9421642eefd2ffc9.png][]

#triangle-right {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }

** Triangle Top Left**

![f08fb62022f899c69fc44a83747cc7cf.png][]

#triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }

**Triangle Top Right**

![4b91c5a6dba3fda6c1037ad7172d58fc.png][]

#triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
     
    }

** Triangle Bottom Left**

![97adb381ea6bf58d7c7094a2123ae333.png][]

#triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }

** Triangle Bottom Right**

![239441caa7bcec02cd50697f70d29f69.png][]

#triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

### 重要内容  ###

.tooltip::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 100%;
      left: 44%;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #ffffff;
    }

[20201119152610236.png]: https://img-blog.csdnimg.cn/20201119152610236.png
[20201119152612575.png]: /images/20221120/4f1b6c3bb4264c9e965c6445a20b5063.png
[e0222e5e04f6be594ebf12f0f13922e6.png]: /images/20221120/9ce235767d1d44aa932e9cac87a8ef9d.png
[b818b6668589530aab26db39a2e30a4c.png]: /images/20221120/41a728ea5d68469ca84a00213550705f.png
[1fceba356b941abe35ba92242dba3c6c.png]: https://img-blog.csdnimg.cn/img_convert/1fceba356b941abe35ba92242dba3c6c.png
[32ff59f44e3e932d9421642eefd2ffc9.png]: https://img-blog.csdnimg.cn/img_convert/32ff59f44e3e932d9421642eefd2ffc9.png
[f08fb62022f899c69fc44a83747cc7cf.png]: https://img-blog.csdnimg.cn/img_convert/f08fb62022f899c69fc44a83747cc7cf.png
[4b91c5a6dba3fda6c1037ad7172d58fc.png]: https://img-blog.csdnimg.cn/img_convert/4b91c5a6dba3fda6c1037ad7172d58fc.png
[97adb381ea6bf58d7c7094a2123ae333.png]: https://img-blog.csdnimg.cn/img_convert/97adb381ea6bf58d7c7094a2123ae333.png
[239441caa7bcec02cd50697f70d29f69.png]: https://img-blog.csdnimg.cn/img_convert/239441caa7bcec02cd50697f70d29f69.png