CSS绘制小图标
css实现小图标一般是由::before、::after、border、transform、position实现
1 最简单且熟悉的就是三角形了：
<style type="text/css"> *{ margin: 0; padding: 0; } .t1{ display: inline-block; width: 0; height: 0; border-top: 10px solid #000; border-left: 10px solid transparent; border-right: 10px solid transparent; } .t2{ display: inline-block; width: 0; height: 0; border-left: 10px solid #000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .t3{ display: inline-block; width: 0; height: 0; border-bottom: 10px solid #000; border-left: 10px solid transparent; border-right: 10px solid transparent; } .t4{ display: inline-block; width: 0; height: 0; border-right: 10px solid #000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } </style> <body> <span class="t1"></span> <span class="t2"></span> <span class="t3"></span> <span class="t4"></span> </body>
效果图：
2 小房子
<style type="text/css"> *{ margin: 0; padding: 0; } .home{ width: 40px; height: 40px; position: relative; } .home::before{ content: ''; width: 0; height: 0; position: absolute; top: 0; left: 0; border: 20px solid transparent; border-bottom-color: #000; border-top: 0; } .home::after{ content: ''; height: 12px; width: 12px; position: absolute; top: 18px; left: 6px; border: 8px solid #000; border-bottom: 0; border-top-width: 10px; } </style> <body> <p class="home"></p> </body>
效果图：
bottom-top-width 左右边框时指边框的宽度值，上下边框时指边框的高度值
3 音量加图标
<style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 40px; height: 40px; position: relative; margin: 20px; } .span1::before{ content: ''; height: 16px; width: 12px; display: block; background: #333; position: absolute; top: 12px; left: 0px; } .span1::after{ content: ''; height: 16px; width: 0; display: block; border: 10px transparent solid; border-left-width: 0; border-right-color: #333; position: absolute; top: 2px; left: 10px; } .span2::before{ content: ''; height: 4px; width: 16px; display: block; background: #333; position: absolute; top: 18px; left: 22px; } .span2::after{ content: ''; height: 16px; width: 4px; display: block; background: #333; position: absolute; top: 12px; left: 28px; } </style> <body> <div> <span class="span1"> <span class="span2"> </span> </span> </div> </body>
效果图：
4 下载图标
<style type="text/css"> *{ margin: 0; padding: 0; } span{ width: 26px; height: 36px; border-bottom: 4px #333 solid; display: block; position: relative; overflow: hidden; } span::before{ content: ''; height: 20px; width: 20px; display: block; border: #333 solid; border-width: 0 6px 6px 0; position: absolute; bottom: 7px; left: 0px; transform: rotate(45deg); } span::after{ content: ''; height: 28px; width: 6px; display: block; background: #333; position: absolute; top: 0px; left: 10px; } </style> <body> <span></span> </body>
效果图：
5 电池电量图标
<style type="text/css"> *{ margin: 0; padding: 0; } span{ width: 35px; height: 20px; background: #333; border-radius: 2px; display: block; position: relative; } span::before{ content: ''; height: 8px; width: 4px; background: #333; display: block; position: absolute; top: 6px; left: 35px; } span::after{ content: ''; height: 8px; width: 4px; background: #fff; display: block; position: absolute; top: 6px; left: 6px; box-shadow: 9px 0 0 #fff; /* 第二格电是用这个box-shadow实现的。第一个值9是指向右平移了9像素，第二个0指竖直方向不平移即和第一个电量格齐平，第三个0是指模糊的距离，这里值不模糊 */ } </style> <body> <span></span> </body>
效果图：
6 上升趋势图标
<style type="text/css"> *{ margin: 0; padding: 0; } .span1{ width: 36px; height: 36px; border: #333 solid; border-width: 0 0 4px 4px; display: block; } .span1::before{ content: ''; height: 4px; width: 18px; display: block; background: #333; position: absolute; top: 24px; left: 0; transform: rotate(-55deg); box-shadow: 15px 10px 0 #333; /* 这里第二条向上的折线就是用这个box-shadow实现的，向右平移了15像素，向上平移了10像素，0为不模糊，颜色为#333 */ } .span1::after{ content: ''; height: 4px; width: 13px; display: block; background: #333; position: absolute; top: 21px; left: 11px; transform: rotate(39deg); } .span2::before{ content: ''; height: 0; width: 0; display: block; border: 10px solid transparent; border-right-width: 0; /* 这里右边框的宽度设置为0可以使上边框（三角形）失去右边的一半，以达到想要的效果 */ border-top-color: #333; position: absolute; top: 8px; left: 25px; } </style> <body> <span class="span1"> <span class="span2"></span> </span> </body>
效果图：
7 锁形图标
<style type="text/css"> *{ margin: 0; padding: 0; } span{ width: 38px; height: 25px; margin-top: 40px; background: #333; border-radius: 3px; border-left: 1px dashed #fff; border-right: 1px dashed #fff; display: block; position: relative; } span::before{ content: ''; height: 10px; width: 16px; display: block; border: 5px solid #333; border-bottom: none; border-radius: 50px 50px 0 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; position: absolute; top: -15px; left: 6px; } span::after{ content: ''; width: 5px; height: 7px; background: #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border: 5px; position: absolute; top: 8px; left: 17px; } </style> <body> <span></span> </body>
效果图：
更多例子可以看这里：http://www.uiplayground.in/css3-icons/
原文：
http://dongtianee.sinaapp.com/demo9.html
