如何用css写一个三角形

网页中很多时候都会遇到一个小三角形 , 有时候我们会用一个icon来写 , 但是在面试或者其他一些时候 , 需要使用css来写一个小三角.

实际运用的一些情况:

城市选择的场景

对话框的小尖尖

代码如下:

//    用伪元素写一个三角形
       &::after{
           content:'';
           display: inline-block;
           margin-left: 6px;
           top: 10px;
           width: 0;
           height: 0;
           border-width: 4px;
           border-style: solid;
           border-color: #000 transparent transparent;
       }

仔细观察呢就会发现这是利用了css的border属性来达成的,将伪元素的内容置空 , 只留上边框 , 就可以写成下三角 , 其他的三角都是同样操作啦