css实现三角形阴影效果

要做一个切换登录的需求

那么就需要一张图标
然后用一个三角形阴影挡住

一开始实现:

    <div class="triangle"></div>

  .triangle {
    width: 0;
    height: 0;
    border-top: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 41px solid white;
    border-left: 41px solid white;
    filter: drop-shadow(2px -2px 2px rgba(128, 128, 128, 0.5));
  }

border尺寸是三角形的高度，也是原正方形盒子的一半

但是右边和下边会有阴影溢出，所以需要在外面包个盒子然后overflow-hidden把阴影挡住

    <div class="overflow:hidden">
        <div class="triangle"></div>
    </div>

最后边界还会漏出来一点，所以border尺寸再调大 1px

.triangle {
    width: 0;
    height: 0;
    border-top: 42px solid transparent;
    border-right: 42px solid transparent;
    border-bottom: 42px solid white;
    border-left: 42px solid white;
    filter: drop-shadow(2px -2px 2px rgba(128, 128, 128, 0.5));
  }

最后就完美完成了