css直接改变图标颜色

<div class="main_menu">
    <ul id="menu_ul">
        <li ><a data-link="military_bills.html"  class="active"><div class="icon-wrapper"><p class="dd"></p></div><span class="nav_ti">111</span></a></li>
    </ul>
</div>

.icon-wrapper {//通过盒子隐藏原图标
   display: inline-block;
   width: 30px;
   height: 30px;
   overflow: hidden;
   position: relative;
   margin-top: 5px;
}
.dd{
   background: url(../images/bi.png) no-repeat center;
   width: 100%;
   height: 100%;
}
.active .dd{//改变的图标显示以及投影颜色
   position: absolute;
   left: -30px;
   display: inline-block;
   border-right: 30px solid transparent;
   -webkit-filter: drop-shadow(#fff 30px 0);
   filter: drop-shadow(#fff 30px 0);
}