前端web魔集前端微说集

纯CSS实现一个微信logo,最少需要几个标签?

2017-04-16  本文已影响64人  xiaojunbo
效果图

答案是  1  个标签即可!

//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最新特性,请仅在移动端和高级浏览器中使用!

上一篇下一篇

猜你喜欢

热点阅读