CSS3：一个标签画LOGO——小米-CSDN博客

一个标签做小米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;
    }

此时的效果是这样的，

很好，完成了一大半，剩下的就是两条竖线了，这时有两种方法：

再创建两个div或者其他的标签来设置样式
利用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就完成了，效果图当当当当~：

最终图如下：