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

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

純CSS實現一個微信logo並不難，難的是怎樣用最少的html標簽實現。我一直在想怎樣用一個標簽就能實現，最后還是沒想出來，就只好用兩個標簽了。

首先需要兩個標簽元素：

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

畫這個logo最難的地方應該就是實現四個小圓的時候，因為CSS3不太熟的人可能不會想到利用box-shadow去實現。

大家還有其它的方法實現微信logo嗎？有沒有一個標簽就能實現的？歡迎留下你的實現方式。