純CSS實現一個微信logo，需要幾個標簽？

博客已遷移至http://lwzhang.github.io。

首先需要兩個標簽元素：

    <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);
}</pre> 

最終效果：
  
 全部 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);
   }
  }
}</pre> 

 畫這個logo最難的地方應該就是實現四個小圓的時候，因為 CSS3 不太熟的人可能不會想到利用 box-shadow 去實現。 
大家還有其它的方法實現微信logo嗎？有沒有一個標簽就能實現的？歡迎留下你的實現方式。
 </div>