WeChat图标的Css实现

先贴上一个微信图标

首先需要两个标签元素：

<div class="bg">
<div class="inner"></div>
</div>

先画个背景：

.bg {
    width: 300px;
    height: 300px;
    background-color: #08c406;
    border-radius: 10px;
    position: relative;
}

再画个大的椭圆：

.inner {
    width: 180px;
    height: 150px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 60px;
    left: 35px;
}

小的椭圆利用.inner的::before伪元素实现：

&::before {
    content: "";
    width: 140px;
    height: 120px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 60px;
    left: 90px;
    border: 2px solid #08c406;
}

下图是现在的结果：

剩下的四个圆可以用css3的box-shadow属性实现，一般用于重复性高的东西

利用.bg的::before伪元素实现这些圆：

&::before {
   content: "";
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #08c406;
   top: 150px;
   left: 155px;
   z-index: 2;
   box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;
}

::before本身会实现一个圆(一个小圆),然后利用box-shadow属性实现其它的三个圆。
来看看现在的效果：

现在就剩下两个角了，想想还有哪些东西没用上？还有两个伪元素，分别是.bg的::after和.inner的::after，刚好可以实现两个角。
这两个角其实就是平常的小三角，然后再旋转个45度，CSS实现小三角太常见了：

.bg::after {
    content: "";
    border-width: 30px 12px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 182px;
    left: 50px;
    transform: rotate(45deg);
}

.inner::after {
    content: "";
    border-width: 30px 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 155px;
    left: 200px;
    transform: rotate(-45deg);
}

最终效果：

全部css代码：

@mixin pos($left, $top) {
  position: absolute;
  left: $left;
  top: $top;
}

.bg {
  width: 300px;
  height: 300px;
  background-color: #08c406;
  border-radius: 10px;
  position: relative;

  &::before {
   @include pos(155px, 150px);
   content: "";
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #08c406;
   z-index: 2;
   box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;
  }

  &::after {
   @include pos(50px, 182px);
   content: "";
   border-width: 30px 12px;
   border-style: solid;
   border-color: #fff transparent transparent transparent;
   transform: rotate(45deg);
 }

 .inner {
   width: 180px;
   height: 150px;
   border-radius: 50%;
   background-color: #fff;
   @include pos(35px, 60px);

   &::before {
    @include pos(90px, 60px);
    content: "";
    width: 140px;
    height: 120px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #08c406;
   }

   &::after {
    @include pos(200px, 155px);
    content: "";
    border-width: 30px 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    transform: rotate(-45deg);
   }
  }
}