使用CSS画个图标

yaodilu 2019-06-27

CSS绘制图标(一)

我们使用单个标签绘制一个文件的图标。HTML内容很简单,就一句话。

<div id="doc"></div>

右上角折叠三角采用after伪元素实现,左下角文字使用before伪元素实现。
主体部分当然还是div#doc

具体CSS样式如下:

#doc {  
    position: relative;    
    width: 155px;
    height: 200px;
    background: #0776ec;
    margin: 100px auto 0;
    border-radius: 10px;
}
#doc:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border:30px solid #59a8eb;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-left-radius: 10px;
}
#doc:before {
    position: absolute;
    content: "CSS";
    bottom: 10px;
    left: 10px;
    color: #fff;
    font: 700 30px/30px "Microsoft YaHei";
}

一切似乎很美好,我们如愿以偿的实现了该有的效果:

使用CSS画个图标

但是:这个效果还是有问题:当我们把浏览器背景颜色修改之后就可以发现了。

使用CSS画个图标

那如何做才能使右上角的白色三角区域为透明色呢?

CSS绘制图标(二)

到了解决问题的时候了,想要解决这个问题就不能不提box-shadow这CSS属性了。

思路:还是使用after伪元素画出右上角的三角形,但是需要使其border-top-colorborder-right-color为透明色,主体部分的蓝色使用after伪元素的box-shadow来模拟(给一个 很大的扩张半径)。

box-shadow: 0 0 0 180px #0776ec;

所以可以看到效果是这样的。
使用CSS画个图标

然后就好办了,因为box-shadow是不占位置的,将这个after伪元素直接定位到div#docx的右上(right:0;top:0;)角。接着给div#docx一个宽高值,然后用overflow:hidden属性将不必要的部分隐藏掉最后加一个圆角效果和文字就可以了。

使用CSS画个图标

这样一来,效果就符合我们的预期。
具体CSS样式如下:

body {
    background: pink;
}
#docx {
    position: relative;
    width: 155px;
    height: 200px;
    margin: 100px auto 0;
    border-radius: 10px;            
    overflow: hidden;
}
#docx:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border:30px solid #59a8eb;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-left-radius: 10px;
    box-shadow: 0 0 0 180px #0776ec;
}
#docx:before{
    z-index: 2;            
    position: absolute;
    content: "CSS";
    bottom: 10px;
    left: 10px;
    color: #fff;
    font: 700 30px/30px "Microsoft YaHei";
}

CSS绘制图标(三)

当我们能深入理解一些CSS属性的时候,实现一些复杂的图标完全不是难事(无非就是将简单的图形组合起来)。例如:可以使用border-radius画出一个鹰嘴的形状。

#test{
    width: 100px;
    height: 100px;
    /*background: green;*/
    margin: 30px auto 0;        
    border-top:30px solid red;
    /*实现鹰嘴效果*/    
    border-top-left-radius: 80px 80px;        
}

使用CSS画个图标

有了这个图形基础,将各个基础图形组合起来,就能实现我们想要的任何图标。例如:

使用CSS画个图标

相关推荐

aSuncat / 0评论 2020-08-18