純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嗎？有沒有一個標籤就能實現的？歡迎留下你的實現方式。