答案是 ?1 ?個標(biāo)簽即可!
//css部份
//主體部份
.icon-wexin{
display:inline-block;
width:64px;
height:64px;
position:relative;
background:radial-gradient(circle at50%50%,#08c406 5%,transparent6%)141%60%,radial-gradient(circle at50%50%,#08c406 5%,transparent6%)64%60%,radial-gradient(circle at50%50%,#08c406 7%,transparent8%)64%19%,radial-gradient(circle at50%50%,#08c406 7%,transparent8%) -12%19%,radial-gradient(at50%50%,#fff 46%,transparent47%)104%77%,radial-gradient(at50%50%,#08c406 50%,transparent51%)104%77%,radial-gradient(at50%50%,#fff 60%,transparent61%)20%38%,#08c406;
border-radius:3px;
background-size:70%58%;
background-repeat:no-repeat;
}
//兩個小角的公共部份
.icon-wexin:before,
.icon-wexin:after{
content:' ';
display:block;
position:absolute;
background:#fff;
width:10%;
height:10%;
}
//左邊的小角
.icon-wexin:before{
left:20%;
top:62%;
clip-path:polygon(47%0%,100%52%,0 100%);
-webkit-clip-path:polygon(47%0%,100%52%,0 100%);
}
//右邊的小角
.icon-wexin:after{
left:72%;
top:73%;
clip-path:polygon(70%0%,100%100%,11%50%);
-webkit-clip-path:polygon(70%0%,100%100%,11%50%);
}
//html部份
<b class="icon-wexin"></b>
注:因為采用了css3最新特性军熏,請僅在移動端和高級瀏覽器中使用轩猩!