css实现三角形

css实现三角形

image.png

具体实现思路

1. 将div的宽高分别设置为0
   2.由边框来控制三角形的大小
   3.将所有的边框的颜色都设置为透明（transparent）
   4.将其中一个边框颜色修改为自己想要的颜色（top：代表下三角形，bottom：上三角形， left：向右的三角形， right：向左的三角形）

//html--向上的三角形


//css
.icon-triangle {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-bottom-color: rgba(255, 161, 60, 1);//向上的三角形
        //border-top-color: rgba(255, 161, 60, 1);//向下的三角形
       //border-left-color: rgba(255, 161, 60, 1); //向右的三角形
       //border-right-color: rgba(255, 161, 60, 1); //向左的三角形
      }

image.png

![image.png](https://upload-images.jianshu.io/upload_images/22668509-68e28068d696a6ca.png?imageMogr2/auto-
orient/strip%7CimageView2/2/w/1240)

image.png

参考：https://blog.csdn.net/qq_43363884/article/details/89011583?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.baidujs&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.baidujs