HTML:

1 <p><strong>原始图标</strong></p>
2 <i class="icon icon-del"></i>
3 
4 <p><strong>可以变色的图标</strong></p>
5 <i class="icon"><i class="icon icon-del"></i></i>

 

CSS:

 1 body {
 2     padding: 100px;
 3 }
 4 
 5 .icon {
 6     display: inline-block;
 7     width: 32px;
 8     height: 32px;
 9     overflow: hidden;
10     /*background: lightcoral;*/
11 }
12 
13 .icon-del {
14     background: url("delete.png") no-repeat center;
15 }
16 
17 .icon > .icon {
18     position: relative;
19     left: -32px;
20     border-right: 32px solid transparent;/*必不可少*/
21     -webkit-filter: drop-shadow(32px 0 0 red);
22     filter: drop-shadow(32px 0 0 red);
23 }

 

效果：

 

 

 

 

学习来自[张鑫旭的空间]

 

版权声明：本文为lqcdsns原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lqcdsns/p/5575355.html