CSS3：一個標籤畫LOGO——小米

一個標籤作小米Logo

這兩天在米家入手了一特貴的周邊，一時興起想用css製做一下它的logo
至於爲何不用ps?由於我

話很少說，先上原圖

HTML代碼：

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

---

先簡單分析一波，這個圖片可分爲三個部分，M的外面+M裏面的豎+一個大寫的I
能夠看到有一小段圓角，這個時候就要用到border-radius
再回憶一下border-radius的用法及參數

　border-radius屬性其實能夠分爲四個其餘的屬性：

border-radius-top-left /*左上角*/
border-radius-top-right   /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left   /*左下角*/

//提示：按順時針方式

小米LOGO的圓角在右上角，那就設置border-radius-top-right 爲適當的值就OK，在那以前記得把設置border-bottom：none,不能設置透明色
若是設置透明色就會出現這樣的效果

顯然咱們想要的不是這樣的，爲何會出現這樣的效果呢？
咱們來看一下邊框究竟是怎樣的

`border-right: 30px solid red;`  
    `border-left: 30px solid green;`  
      `border-top: 30px solid blue;`  
    `border-bottom: 30px solid teal;`

它的效果圖是這樣的（反相了）

雖然配色有點辣眼睛，可是能夠看出邊框的交界是一個斜角，因此把底邊設置透明就會出現兩個小角角，
設置爲none就會變成一個直的腳了，可是設置爲none對瀏覽器IE6，IE7不兼容，因此最好設置爲border-bottom：0
代碼以下：

.M {
    width: 80px;  
    height: 80px;  
    border-radius: 0 45px 0 0;  
    border-top: 30px solid white;  
    border-right: 30px solid white;  
    border-left: 30px solid white;
    border-bottom-width: 0;
    }

此時的效果是這樣的，

---

很好，完成了一大半，剩下的就是兩條豎線了，這時有兩種方法：

1. 再建立兩個div或者其餘的標籤來設置樣式
2. 利用CSS3中的僞元素來製做
   因爲建立另外的標籤來製做基本上人人都會，就在此跳過，咱們用僞元素來作，那麼，什麼是僞元素呢？

你必定知道僞類樣式，好比hover，在作效果的時候常常用到，而hover是不會改變元素自己的樣式的，鼠標移開後元素又恢復成原來的樣子，這就給人一個假象，元素樣式改變了，其實並無，那僞元素也是同樣，咱們能夠添加額外元素而不擾亂文檔自己，這就是「僞元素」。僞元素:before和:after兩者的做用爲在元素以前或以後插入某些內容。（僞元素和僞類樣式不同，要注意用兩個冒號鏈接）
此時，在M的外框里加入僞元素，代碼以下：

.M::before {
        content: "";
        display: inline-block;
        position: relative;
        left: 25px;
        top: 25px;
        height: 55px;
        width: 30px;
        background-color: white;
    }

此時的效果圖以下：

此時已經完成一大半，還差個I，話很少說，搞起！
建立一個after僞元素而且調整樣式：

.M::after{
        content: " ";
        display: inline-block;
        position: relative;
        left: 110px;
        top: -30px;
        height: 110px;
        width: 30px;
        background-color: white;
    }

設置了這個I的僞元素後發現前面的before僞元素的位置也發生了變化，
調整後代碼以下：

.M::before {
        content: "";
        display: inline-block;
        position: relative;
        left: 25px;
        top: -30px;
        height: 55px;
        width: 30px;
        background-color: white;
        }

此時，小米的logo就完成了，效果圖噹噹噹當~：

最終圖以下：