css画微信图标

时间：2015-08-26 01:40:21 收藏：0 阅读：964

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信图标</title>
<style type="text/css">
.div1{
position: relative;
margin: auto;
width: 300px;
height: 300px;
background:#0f2;
border-radius: 20px;

}
.div2{
position: absolute;
top: 30px;
left: 20px;
width: 200px;
height: 160px;
background: #fff;
border-radius: 50%;

}
.div3{
position: absolute;
top: 100px;
right: 20px;
width: 170px;
height: 130px;
background: #fff;
border:3px solid #0f2;
border-radius: 50%;
}
.span1,
.span2{
position: absolute;
top:40px;
margin: 0 45px;
height: 20px;
width: 20px;
background: #0f2;
border-radius: 100%;
}

.span2{
margin-left: 135px;
}

.span3,
.span4{
position: absolute;
top:35px;
margin: 0 40px;
height: 20px;
width: 20px;
background: #0f2;
border-radius: 100%;
}
.span4{
margin-left: 110px;
}

.span5,.span6{
position: absolute;
width: 0;
height: 0;
border: solid transparent;
border-left-width:20px;
border-top-width:30px;
border-bottom-width:30px;
border-left-color: #fff;

}
.span5{
transform:rotate(30deg);
top:120px;
left: 40px;
}
.span6{
transform:rotate(-60deg);
top:90px;
right: 30px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<span class="span1"></span>
<span class="span2"></span>
<span class="span5"></span>
</div>
<div class="div3">
<span class="span3"></span>
<span class="span4"></span>
<span class="span6"></span>
</div>
</div>

</script>
</body>
</html>