在实际开发中，我们会用到一些小图形，图标。大多数情况下都是用图片来实现的，同时对图片进行处理使图片大小尽可能的缩小。但是图片在怎么处理也是按KB来算的。但是要是用CSS画，只要用很少的空间就能完成同样的效果了，而且还方便后期的维护。我们今天画四个图形，一个三角形，一个直角三角形，两种方法画多边框正方形，同心圆，分享图标。
三角形
首先，我们先画一个三角形
代码如下： 1 <div id="duo1"></div> 对 就是用一个DIV来画。
我们可以把这幅图补脑一下
这是不是就有点眼熟了呢？没看出来没关系，在看这张。
左边的大家应该很熟悉了，就是一个有边框的盒子，而右边的就是把盒子的宽度和高度设置为0px。
然后我们把边框的左，上，右设置为白色。代码如下
1 <head>
2 <style>
3 div[id="duo1"]{
4 width:0px; height:0px;
5 border-top:50px solid white;
6 border-left:50px solid white;
7 border-bottom:50px solid #000;
8 border-right:50px solid white;}
9 </style>
10 </head>
11 <body>
12 <div id="duo1"></div>
13 </body>
直角三角形
那么直角三角形呢？其实方法是一样的。显示左下两部分边框，
//css样式代码
div[id="zjsjx"]{
width:0px; height:0px;
border-top:50px solid white;
border-left:50px solid blue;
border-bottom:50px solid blue;
border-right:50px solid white;}
//HTML代码
<div id="zjsjx"></div>
正方形
那有两个边正方形怎么用一个div画呢？
这个时候就要用到一个属性 描边属性outline或者叫轮廓线属性。
1 div[id="dcbk"]{
2 width:50px; height:50px;
3 outline:10px solid blue;
4 border:10px solid yellow;}
但是，outline属性有有关问题 比如要设置这个DIV为圆角，那么这个属性就会有问题，如图：
可以看出 outline属性不会随着div的圆角变化而变化。那怎么办呢？别急 我们还有第二种方法来实现。
正方形方法二
第二种方法我们要用到一个属性box-shadow属性。
box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;
即box-shadow: 水平阴影的位置（左偏移） 垂直阴影的位置（下偏移） 模糊距离（模糊度） 阴影的尺寸 颜色 将外部阴影 (outset) 改为内部阴影;
当然我们这里不需要设置那么多值。
如果水平阴影的位置 垂直阴影的位置都设置为O即左，下不偏移，然后再设置尺寸不就是相当于边框了吗？
1 div[id="dcbk2"]{
2 width:50px; height:50px;
3 border:10px solid yellow;
4 box-shadow:0 0 0 10px blue;
效果是一样的，而且跟着圆角变
同心圆
一个圆我们会画，两个同心圆我们也可以，那么三个四个五个呢？
怎么做呢？要是可以定义多个边框不就好了吗？在上面，我们是用box-shadow来做边框效果的
同样，我们还是用box-shadow属性。但是其实box-shadow可以同时定义多个阴影的，写法如下
1 div[id="yuan"]{ width:50px; height:50px;
2 border:10px solid yellow;
3 border-radius:100px;
4 box-shadow:0 0 0 10px black,
5 0 0 0 20px blue,
6 0 0 0 30px red;}
中间用"，"隔开就好了，没有数量限制。
分享图标
最后我们做一个分享的图标
这个怎么做呢？我们可以把他分开来看，可以看成一个三角形，两个边框还有一个鹰嘴一样的图。
三角形和两个边框好做的，利用本文的第一部分讲的就能作了。关键是鹰嘴怎么做？
这样补齐是不是就是一个左上角为圆角的盒子了？
然后我们再把左边距的宽度缩小到0，是不是就是一个鹰嘴的图形了？
下面是分享图标的代码：
1 div[id="hez1"]{
2 width:10px; height:30px;
3 border-top:5px solid #000;
4 border-left:5px solid #000;
5 border-right:5px solid white;
6 position: absolute;}
7 div[id="hez2"]{
8 width:30px; height:5px; border-top:5px solid white;
9 border-right:5px solid #000;border-bottom:5px solid #000;
10 position: absolute;left:0px;top:15px;}
11
12 div[id="yuanjiao"]{
13 width:20px; height:20px;
14 border-radius:20px 0 0 0;
15 border-left:0px solid #000;
16 border-top:10px solid #000;
17 position: absolute;
18 left:5px;top:-21px;
19 }
20 div[id="sanjiao"]{
21 width:0px; height:0px;
22 border-top:13px solid white;
23 border-left:13px solid #000;
24 border-bottom:13px solid white;
25 border-right:0px solid white;
26 position: absolute;
27 left: 20px;
28 top: -18px;}
29
30 <div id="hez1">
31 <div id="hez2">
32 <div id="yuanjiao">
33 <div id="sanjiao"></div>
34 </div></div></div>
等等！！！你以为这样就完了？太天真了！！！
把背景改为红色看看!!!
这样就会发现，之前不管是三角形还是什么我们的边框设置的都是白色，而且分享图形放大了看会发现下面边框的一角被三角形挡住了。
怎么解决呢？很简单。吧他透明就好了，
rgba(r,p,g,a);其中A是透明度的意思，A为1 代表不透明，A为0代码100%透明。
rgba(255,255,255,0.0);以下是部分代码。
1 div[id="sanjiao"]{width:0px; height:0px;
2 border-top:13px solid rgba(255,255,255,0.0);
3 border-left:13px solid #000;
4 border-bottom:13px solid rgba(255,255,255,0.0);
5 border-right:0px solid rgba(255,255,255,0.0);
6 position: absolute;
7 left: 20px;
8 top: -18px;}
你以为这样就完了吗？不！还没完。
做为一个优秀的前端工程师，我们要用最简洁的代码写出最好的功能。
1 div[id="one"]{width:10px; height:30px;
2 border-top:5px solid #000;
3 border-left:5px solid #000;
4 border-right:5px solid rgba(255,255,255,0.0);
5 position: absolute;}
6
7 div[id="one"]:after{
8 content:""; width:30px; height:5px;
9 border-top:5px solid rgba(255,255,255,0.0);
10 border-right:5px solid #000;
11 border-bottom:5px solid #000;
12 position: absolute;left:0px;top:15px;
13 }
14
15 div[id="one"]:before{
16 content:""; width:20px; height:20px;
17 border-radius:20px 0 0 0;
18 border-left:0px solid #000;
19 border-top:10px solid #000;
20 position: absolute;
21 left:5px;top:-1px;
22 }
23
24 div[id="sanjiao2"]{width:0px; height:0px;
25 border-top:13px solid rgba(255,255,255,0.0);
26 border-left:13px solid #000;
27 border-bottom:13px solid rgba(255,255,255,0.0);
28 border-right:0px solid rgba(255,255,255,0.0);
29 position: absolute;
30 left: 25px;
31 top: -10px;}
32
33 <div id="one"><div id="sanjiao2"></div></div>
我们把上面的代码简化成只用两个DIV就能做出相同的效果。
下面是全部代码：
1 <!DOCTYPE html>
2 <HTML>
3 <head>
4 <style type="text/css">
5 *{ margin:0px; padding:0px; border:0px; }
6 body{ padding:20px;}
7 div[id="duo1"]{width:0px; height:0px; border-top:50px solid rgba(255,255,255,0.0);
8 border-left:50px solid rgba(255,255,255,0.0);
9 border-bottom:50px solid #000;
10 border-right:50px solid rgba(255,255,255,0.0);}
11
12 div[id="zjsjx"]{width:0px; height:0px;
13 border-top:50px solid rgba(255,255,255,0.0);
14 border-left:50px solid blue;
15 border-bottom:50px solid blue;
16 border-right:50px solid rgba(255,255,255,0.0);}
17
18 div[id="dcbk"]{ width:50px; height:50px; outline:10px solid blue; border:10px solid yellow;}
19
20 div[id="dcbk2"]{ width:50px; height:50px;
21 border:10px solid yellow;
22 box-shadow:0 0 0 10px blue;}
23
24 div[id="yuan"]{ width:50px; height:50px;
25 border:10px solid yellow; margin:20px;
26 border-radius:100px;
27 box-shadow:0 0 0 10px black,0 0 0 20px blue,
28 0 0 0 30px red;}
29
30 //分享图标的css代码
31 div[id="hez1"]{width:10px; height:30px;
32 border-top:5px solid #000;
33 border-left:5px solid #000;
34 border-right:5px solid rgba(255,255,255,0.0);
35 position: absolute;}
36
37 div[id="hez2"]{width:30px; height:5px;
38 border-top:5px solid rgba(255,255,255,0.0);
39 border-right:5px solid #000;
40 border-bottom:5px solid #000;
41 position: absolute;left:0px;top:15px;}
42
43 div[id="yuanjiao"]{width:20px; height:10px;
44 border-radius:20px 0 0 0;
45 border-left:0px solid #000;
46 border-top:10px solid #000;
47 position: absolute;
48 left:5px;top:-21px;
49 }
50
51 div[id="sanjiao"]{width:0px; height:0px;
52 border-top:13px solid rgba(255,255,255,0.0);
53 border-left:13px solid #000;
54 border-bottom:13px solid rgba(255,255,255,0.0);
55 border-right:0px solid rgba(255,255,255,0.0);
56 position: absolute;
57 left: 20px;
58 top: -18px;}
59
60
61
62 //简化后分享图标的css代码
63 div[id="one"]{width:10px; height:30px;
64 border-top:5px solid #000;
65 border-left:5px solid #000;
66 border-right:5px solid rgba(255,255,255,0.0);
67 position: absolute;}
68
69 div[id="one"]:after{
70 content:""; width:30px; height:5px;
71 border-top:5px solid rgba(255,255,255,0.0);
72 border-right:5px solid #000;
73 border-bottom:5px solid #000;
74 position: absolute;left:0px;top:15px;
75 }
76
77 div[id="one"]:before{
78 content:""; width:20px; height:20px;
79 border-radius:20px 0 0 0;
80 border-left:0px solid #000;
81 border-top:10px solid #000;
82 position: absolute;
83 left:5px;top:-1px;
84 }
85
86 div[id="sanjiao2"]{width:0px; height:0px;
87 border-top:13px solid rgba(255,255,255,0.0);
88 border-left:13px solid #000;
89 border-bottom:13px solid rgba(255,255,255,0.0);
90 border-right:0px solid rgba(255,255,255,0.0);
91 position: absolute;
92 left: 25px;
93 top: -10px;}
94
95 </style>
96 </head>
97 <body>
98 <div id="duo1"></div>
99 <br>
100 <div id="zjsjx"></div>
101 <br>
102 <div id="dcbk"></div>
103 <br>
104 <div id="dcbk2"></div>
105 <br>
106 <div id="yuan"></div>
107 <br>
108 <!--
109 <div id="hez1">
110 <div id="hez2">
111 <div id="yuanjiao">
112 <div id="sanjiao"></div>
113 </div></div></div>
114 -->
115
116 //简化后分享图标的HTML代码
117 <div id="one"><div id="sanjiao2"></div></div>
118 </body>
119 </HTML>
如果有什么疑问或者建议或者漏洞及错误欢迎指正，与我联系
==================================================================================================
本文为冷小包原创，转载请注明出处及作者。谢谢合作
——冷小包著