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就完成了，效果图当当当当~：

最终图以下：