控制border来实现三角形原理

在看别人网站上有类似指示作用的  小三角形图标 准备下载下来自己用的时候 审查元素后看到 这尼玛原来是css弄出来的- -  附上代码

.box{
    display: block;
    height: 0;
    width: 0;
    border-bottom: 10px yellow solid;
    border-right: 10px solid red;
    border-top: 10px solid yellow;
    border-left: 10px solid red;
}

                

如下图：

明白了吧，四个边可以隐藏其中三个来实现各个方向上面的三角形，原理：看了下border的实现方式，故做了一张图，大家一看便知

看到了吧这其实就是正常的一个元素有黑色边框的情况，他的四个边框其实是等腰梯形，而宽高设置为0以后从而等腰梯形也就变成了等腰三角形（如果border等宽），所以就可以根据border的透明来设置三角形啦~