Drop-shadow的奇形怪状我们在做气泡需求时，当气泡需要在外围加上一层投影。一般而言，用box-shadow就可以

我们在做气泡需求时，当气泡需要在外围加上一层投影。一般而言，用box-shadow就可以做到，难就难在气泡的左边有个尖角也要加上投影，如红色箭头所示，并且这个尖角还不是一般的三角形，而是一个不规则图案。这种情况下，用box-shadow就无法完美兼容了。‘

典型案例

所以就用filter 滤镜属性drop-shadow

语法： filter:drop-shadow(2px,2px,2px,#000)

用途：

1、利用svg裁剪形状

<div class="wrap">
  <div class="clipboard" style="clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 56% 68%, 25% 100%, 0% 60%, 10% 20%);"></div>
</div>

.wrap{ filter:drop-shadow(5px 5px 5px #f00);margin:20px 0;}

2、更换图标颜色

利用把第三个参数的2px模糊去掉，x坐标偏移值加大，y坐标偏移值改为0

filter: drop-shadow(40px 0 #f00);

然后再把多余的图标隐藏掉

.pic-wrap{
  display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-align: left;
    position: relative;
}

.skinpic{
width:40px;
height:40px;
background:url(https://puui.qpic.cn/vupload/0/1569557483872_rzfralusf79.png/0) no-repeat 0 0;
  background-size:cover;
  filter: drop-shadow(40px 0 #f00);
  border-right:40px solid transparent;
 transform: translate3d(-40px,0,0);    
overflow: visible;
      position: relative;
      display: inline-block;
  position: relative;
    top: -3px;
  transform: translateX(-40px);
}

链接地址：codepen.io/zhangshupi8…