使用CSS绘制图标

右上角的折叠三角形由after伪元素实现，左下角的文字由before伪元素实现。主要部分当然是div#doc。具体的CSS样式如下：#doc{position:relative;宽度：155px；高度：200px；背景：#0776ec；边距：100px自动0；border-radius:10px;}#doc:after{position:absolute;内容：””;右：0；顶部：0；宽度：0；高度：0；边框：30px实心#59a8eb；边框顶部颜色：#fff；右边框颜色：#fff；border-bottom-left-radius:10px;}#doc:before{position:absolute;内容：“CSS”；底部：10px；左：10px；颜色：#fff；font:70030px/30px"MicrosoftYaHei";}一切似乎都很好，我们达到了预期的效果：但是：这个效果还有一个问题：我们修改浏览器的背景色可以发现.那么如何让右上角的白色三角形区域透明呢？CSS绘制图标（二）是时候解决问题了。如果要解决这个问题，就不得不提到box-shadow这个CSS属性。思路：依然使用after伪元素绘制右上角的三角形，但是需要将border-top-color和border-right-color透明化，使用after伪元素的box-shadow模拟主要部分的蓝色（对于较大的扩展半径）。盒子阴影：000180px#0776ec；所以你可以看到效果是这样的。那么好办，因为box-shadow不占位置，所以after伪元素直接定位到div#docx的右上角(right:0;top:0;)。然后给div#docx一个宽高值，然后用overflow:hidden属性隐藏不需要的部分，最后加上圆角效果和文字。这样一来，效果是符合我们预期的。具体的CSS样式如下：body{background:pink;}#docx{position:relative;宽度：155px；高度：200px；边距：100px自动0；边界半径：10px；溢出：隐藏；}#docx：之后{位置：绝对；内容：””;右：0；顶部：0；宽度：0；高度：0；边框：30px实心#59a8eb；边框顶部颜色：透明；右边框颜色：透明；border-bottom-left-radius:10px;box-shadow:000180px#0776ec;}#docx:before{z-index:2;位置：绝对；内容：“CSS”；底部：10px；左：10px；#fff;font:70030px/30px"MicrosoftYaHei";}CSS绘制图标（三）当我们能够深入理解一些CSS属性后，实现一些复杂的图标就不难了（无非就是结合简单的图形）。例如：你可以使用border-radius来绘制鹰嘴的形状。#test{宽度：100px；高度：100px；/*背景：绿色；*/边距：30pxauto0；border-top:30px纯红色；/*实现鹰嘴效果*/border-top-left-radius:80px80px;}有了这个图形基础，我们就可以通过组合各种基础图形来实现我们想要的任何图标。例如：