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

效果图

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容