用css控制一个DIV画图标。

在实际开发中，我们会用到一些小图形，图标。大多数情况下都是用图片来实现的，同时对图片进行处理使图片大小尽可能的缩小。但是图片在怎么处理也是按KB来算的。但是要是用CSS画，只要用很少的空间就能完成同样的效果了，而且还方便后期的维护。我们今天画四个图形，一个三角形，一个直角三角形，两种方法画多边框正方形，同心圆，分享图标。

三角形

首先，我们先画一个三角形

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABDCAIAAAAkrn0hAAABgElEQVR4nO3awQ3DMAxDUc+cCZIs4JHbg4AeiqKtbUqiDP4JqHdWeyh0LXvAhskUn0zxyRSfTPHJFJ9M8ckUn0zxyRSfTPHJFJ9M8ckUn0zxyRSfTPGxm17X1XvPXjEWtWnvvbXWWqvFymv6ArXO88xe9G+kpm+gtVgZTT+CFmKlM/0CWoWVy/QnaAlWItM/QflZWUyHQMlZKUwnQJlZ802nQWlZk00XQTlZM00hoISsaaZAUDbWHFM4KBVrgqkTKA9rtKkrKAlrqGkAKANrnGkYaDprkGkwaC5rhGkKaCKru2kiaBarr2k6qBXM6mhKAmpFsnqZUoFaYawupoSgVgwr3pQW1ApgBZuSg1rerEjTEqCWKyvMtBCo5ceKMS0HajmxAkyLgloerKumpUEtOOuS6QagFpZ13nQbUAvIOmm6GaiFYp0x3RLUgrAOm24Maq2zjpne9519ckSLrAOmx3FkHxvXCmv+X99+yRSfTPHJFJ9M8ckUn0zxyRSfTPE9AX1+vkWfo1CCAAAAAElFTkSuQmCC" alt="" />

代码如下：  <div id="duo1"></div> 对 就是用一个DIV来画。

我们可以把这幅图补脑一下

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABqCAIAAADsoV6xAAADw0lEQVR4nO3US4LbMAwDUB/dN8iR04U67UT0h5IACo6IpUPLEN+02zsjnG12gcxVkkc6ySOd5JFO8kgneaSTPNJJHukkj3SSRzrJI53kkY6XZ/sJtU2mimvd2/JhM5xu3jWUmSSUPN6wJY437xrKJI9y2Aynm3cNSVZnRO2OmH897JYxEbwg7D83dlFqZG/Xw2OfPFpI+Y+vk8c+fKiQx+aRPPb544QuMEQuNcRjf3qQ0PU/FJEbjfLYXx8hdNtZ5DoAHjsgLuRpK3IXDI+dkRVy9hS5CIzHjgkK+RuK3ALJYyelhJq6iVwBzGOHRYRaW4n0x/PY+elCHX1EylN47CsTL9nXRKH5m8dj34q/52GBvj8vdtXTGq6h3q4ThUZs7OvUqlc1XEMDXacIDdrYE3hVb2q4hsa6BguN29hDSFXva7iGhruGCUFs7DmMqq4ariFE1wAh4CeW47HnYG+OPXxFHnsU6vLwYxflsadpkq/LYw8cOZZhY48dP7CzhmuI0BWyVpKNPRlyZk8N1xCn6+ByeTb2cNSxzTVcQ7Su3Sum2tjzgSe31XANMbu2Lvpwnt0Ke3hDDdcQuat/3TE29kPw8701XEP8rp6lh9nYbzE+4arhGgrper36SBv7OdJX7mu4hqK6ngEE29gv8j50U8M1FNj1TCJ4X8nj/Vy8je0Q8MXjGq6h2duJ31TytH00eE3Jo/vduZ/+qOEamtT19XrNWlDy3OS3zbZt+77HfLckea5S2cQLJc9pDm2ChZLnOBc2kULJc5BbmzCh5KnjtIkRSp6PNNkECCXP/3TYsIWS52+6bahCyfN+D9vwhJIHY0MSWp0HaMMQWpoHbgMXWpeHZIMVWpSHagMUWpEnwAYltBxPmE3JoBDkyuMJ4gm2KRkRGr8yJBE8U2xKuoWqc/oOGQ+dZ6JNSZ9QdUjHCZBweabblHQIVSe0vo4KkUfEpqRVqHq96V1gWDxSNiVNQtW7/hexofAI2pT4haoXnW/Bg+eRtSlxClVveV5hBMwjblPiEape8a4THSTPI2xKboWq+bal4gLjeZBNybVQNdyzWkQwPI+zKbkQqib7FzwWAM9DbUrOhKqx0TX3ZpTn0TYlh0LVDGbZ7Rni+QKbEitUDSBX3pJ+nq+xKamEql/xi/elk+fLbEp+C1U/sdZ/u3nX0Ge+0qbkn1D1nElwuXnX0EopQtVDssL55l1Di2Xf9+oJm+F0866h5cNmON28d2520fgoXHmhdT8xySOd5JFO8kgneaSTPNJJHukkj3SSRzp/AE2+G21RLovpAAAAAElFTkSuQmCC" alt="" />

这是不是就有点眼熟了呢？没看出来没关系，在看这张。

aaarticlea/png;base64,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" alt="" />

左边的大家应该很熟悉了，就是一个有边框的盒子，而右边的就是把盒子的宽度和高度设置为0px。

然后我们把边框的左，上，右设置为白色。代码如下

 <head>
 <style>
 div[id="duo1"]{
 width:0px; height:0px;
 border-top:50px solid white;
 border-left:50px solid white;
 border-bottom:50px solid #;
 border-right:50px solid white;}
 </style>
 </head>
 <body>
 <div id="duo1"></div>
 </body>

直角三角形

那么直角三角形呢？其实方法是一样的。显示左下两部分边框，

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMAAABnCAIAAACLhOdNAAAB60lEQVR4nO3UUW5CMQxEUS8dvoEiFsBa049KrdRKlOTFice+dwXjHCnWSDPbPYAGQ0415FRDTjXkVENONeRUQ0415FRDTjXkVENONeRUQ0415FRDTjXkVOuWO589ZlB33XJm7XLxWEJ9jciBF6FBObN2vXrsoXcblwNvb4fkwNvYUTnwdjVBDrwtzZEDb33T5MBb3Ew58FY2WQ68Zc2XA29NLnJm7XbzWEs/ecmB552jHHiu+cqB55e7HHhOrZADz6NFcuBNb50ceHNbKgfexFbLmbWPD49DyrVBDrwp7ZED73jb5MA72E458I60WQ684fbLgTdWCDnwBooiB15vgeTA6yqWnFm73z3OTFg4OfDeLKIceO8UVA68f4srB97rQsuB96Locmbt+fQ4XD4BObP2eHjcrp2GHN/m32TkwPuVkpxZO508HkEyMTnwvtOTA+8rSTnwmq4ceMJyxfG05SrjycuVxcsgVxMviVxBvDxy1fBSyZXCyyZXBy+hXBG8nHIV8NLKpcfLLJcbL7lcYrz8clnxSsilxKsilw+vkFwyvFpymfDKyaXBqyiXA6+oXAK8unLqeKXlpPGqy+niIaeKh5wqHnKqeMip4iGnioecKh5yqnjIqeIhp4rXLUdBQk415FRDTjXkVPsEm/HkJ1GDCB8AAAAASUVORK5CYII=" alt="" />

//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画呢？

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABWCAIAAADE/cYTAAAA0klEQVR4nO3QwQ0DMRADMfff9OYzeVwBge0cBRUw4BqbmZm1O+CUgWggGogGooFoD4i1/vMgQIAAAQIEiH0QM+uKgwABAgQIECBugtg1EN9SEJWCqBREpSAqBVEpiEpBVAqiUhCVgqgURKUgKgVRKYhKQVQKolIQlYKoFESlICoFUSmISkFUCqJSEJWCqBREpSAqBVEpiEpBVAqiUhCVgqgURKUgKgVRKYhKT4M46yBAgAABAgSI8yBuPwgQIECAAAHi9xBvHogGooFoIBqIBqJ9AE1KcS/HLI9TAAAAAElFTkSuQmCC" alt="" />

这个时候就要用到一个属性 描边属性outline或者叫轮廓线属性。

 div[id="dcbk"]{
 width:50px; height:50px;
 outline:10px solid blue;
  border:10px solid yellow;}

但是，outline属性有有关问题 比如要设置这个DIV为圆角，那么这个属性就会有问题，如图：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAABdCAIAAABB+F3uAAACbElEQVR4nO3br04cURzF8RHIFTgMoqICwyOQkMAzdF9gxYqKTUpa0YohfZQKEhAIBIInWF1IH2DFisqKESu+FaQ9+4ffzJBc7t2Wc3Il4Z7fJ+wsydxb4fxJVbrAFsUWii0UWyi2UGyhPGFRVf/nsoUtbGELW9jCFttn0ZUG7mAEx/AWBlAlWgN4A8cwghtoOkYqajGHSdLhO2nGMN82iwXUsJtLYU2khsWWWExhWEJheQ1hWtziO+yXhnhc+/CjoMUUjkoTLK+j5b+OnBYzeFd6+M01hFl+i/PSY0frPLPFvOtb4wC+wg387N68b2ZwDV/goHXr3ccv2mwWk9Y27+FXOoLNNF0FJl392/Isi6b1H6pvqSePcgs7QYcBLPJYXMUQH5JP3JpPcZOrPBaj+Bnxoh+NzTTxs2Ocx+I02L5OPmuP1EGZ0zwWh8H2l8kH7ZHLoMxhHou9YPuH5IP2yENQZi+PRfS4KpWn+9jCFrb429QWamoLNbWFmtpCTW2hprZQU1uoqS3U1BZqags1tYWa2kJNbaGmtlBTW6ipLdTUFmpqCzW1hZraQk0LWkTviu6TT9kj90GZTO+K/A5Rv+sk2L5OPmiP1EGZkzwWLWcOOs4lp07LmYNRHouL+PH5Mfm4rfkcN7nIY9F+Ruk2+cRB7lrPKDV5LIBxbLEDZy/8YWngLIaoYNzVvy3PtZh33QcoeKZxkPlMI/EDvPiq+/VPaeEz0Cs/6LPxK/GdiZX4Ls1KfMdqPb57t57XdCfzX1+2sIUtbGELW9iinMWrjS0UWyi2UGyh2EKxhWILxRaKLRRbKLZQbKHYQvkNPJRcrMcw0F0AAAAASUVORK5CYII=" alt="" />

可以看出 outline属性不会随着div的圆角变化而变化。那怎么办呢？别急 我们还有第二种方法来实现。

正方形方法二

第二种方法我们要用到一个属性box-shadow属性。

box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;

即box-shadow: 水平阴影的位置（左偏移）  垂直阴影的位置（下偏移） 模糊距离（模糊度） 阴影的尺寸  颜色  将外部阴影 (outset) 改为内部阴影;

当然我们这里不需要设置那么多值。

如果水平阴影的位置  垂直阴影的位置都设置为O即左，下不偏移，然后再设置尺寸不就是相当于边框了吗？

 div[id="dcbk2"]{
 width:50px; height:50px;
 border:10px solid yellow;
 box-shadow:0 0 0 10px blue; 

效果是一样的，而且跟着圆角变

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGcAAABdCAIAAAA3wu9lAAAA3UlEQVR4nO3QwQkDQRAEsc0/6XUENrg+N3Oo6AAanav/O08fWNlXtXPeOWrUqE0eNWrUJo/aHrV7z4pRo0Zt8qhRozZ51N6s9lTUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1ErUStRK1Eq71WaNGjVqk0eNGrXJo7ZfbfuoUaM2edSoUZs8avPU9CNqJWolaiVqJWolaiVqJWolaiVqJWolaiVqJWolaiVqJWolaqUPKgrr95kTu+cAAAAASUVORK5CYII=" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAABNCAIAAAAuKA1wAAAFI0lEQVR4nO2cMWhTWxjHMwhWyJDNggFfgkMULB1SraWWiFJapw5ip8IVOnR4Q+FJX+C9ISVkq0toSYtChzfYKuUVLGQQmkWHImbR8LIUElPIUEMqb7hgcvN/Q6H6cr5zbk5yz70pnD/f9C358ePenNPmO8cHnd7i8xrg3McZg6aJbBbxOAwDsRgiEfj98PmcKb8fkQhiMRgG4nFkszBNR6idSU8G63VsbmJmxklfHTp99Aibm6jXnfLQfbo0WCohlcKNG66KY+v6dSSTODx01olcpA1++4ZMBuPjHrv7uUZHkU7j61cVfuwjZ/D4GLGY98rIikZRrSqyJIqEwb093LvnvSlBjY1hZ0edKzqdGnzxApGI945sKxTC2ppSY+3pyODz5wgEvLfTYV28iNVV1d5+xN7g3l5HT18gYC4tvS0W5+v12Pfv11otP+BzpFotf6PxS70eKxbnl5ffBAKmLUw4jN1dF+wBtgY/frT/7hsaqubziw4qsxVaKCwMDVXFVBMT+PChDwyKV96BgUYul2i1Au64a/OYyyUGBhoCvFjMa4OZjEifYRyUy7Puu/u5yuVZwzgQQGYy3hkslUTb5pmZT81m0Ft9p9VsBh8+/IfHOT6OUskjg6kUV9+TJwcnJ3c9d3dWJyd3BU9iKuWFwXqdu30ZGal8+fLYc2ttVS7PjoxUOJsEtf+AoA1ubHAfwP39Zc99kbW/v8xj3thw3eDcHI0yOVm1LPHKGwGSwBvg2DnICvA38CcQEXx0sxmYnKS3OHNzzrEwIQweHSEUog3m84tCfb8C/yqEhQmIAPL5RRI7FMLRkSomwuD2Nq3v6lXTsgTb5r9UMbYnC1wgGSzLHwzSO8TtbVU0hMF4nDa4svKar+83VYB0fueRrKy8JuHjcVUohEHDoA0Wi/P87z6lLy8bk/edWCgskPCGoQqFMDg1RRus1R5wDCZU0YmSIGFqtQck/NSUKg7C4PAwbdA0b3IMvlJFJ8orEsY0b5Lww8OqOAiDg4O0Qcu6zDFYUEUnSoGzmFwm4QcHVXEQBnn7Uv4y4lVoHj6/KgimpQ1KQjAtbVASgmlpg5IQTEsblIRgWtqgJATT0gYlIZiWNigJwbS0QUkIpqUNSkIwLW1QEoJpaYOSEExLG5SEYFraoCQE09IGJSGYljYoCcG0tEFJCKalDUpCMC1tUBKCaWmDkhBMSxuUhGBa2qAkBNPSBiUhmJY2KAnRHvlf3D+rohPlMwnTF7+466kPqRAG+ZNH9zkGE6roREmQMLXafRLe1cmjrqbfXD63z51+KxbnSXhXp994E5jp9Ev+YrKkCpDOHzySdPolCe/qBObWFm0wHBZPAWdVMbbnrWAKOBymzy1ubamiIQwKJtELhQW+wQvAU8Wvswk85ekDf4DV7Ul08E9DTE9XhY+hz8PTEJbln57uj9MQANbXufvqXI5eBD2vXC7BY15fd92gPhXWq0EAyST3MTxfJxOTSYX6RAYPDzE6ypV4Xk7H3rmj/D4frkEA6TTX4OmT2P8ntNNptfpsDDYaiEZFEvv8loBoFI2GpwYBvH+PsTGRRF+/3lRx6xbevVOuz94ggJ0d7gb7/0teH92WcuWKwj9C2mJvEMDaGi5dspfYP/XsmWpvP9KRQQCrqwiHvVdjW8Ggq/rQuUEAu7uYmPDekaBu33bv5T2LhEEA1Wpf355XqSiyJIqcQegbHJlIGzyNvkX0LF0aPI2+yRY9GjyLvk1Zp/tog71GG+w1/wGpU0KK8r1g9wAAAABJRU5ErkJggg==" alt="" />

同心圆

一个圆我们会画，两个同心圆我们也可以，那么三个四个五个呢？

aaarticlea/png;base64,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" alt="" />

怎么做呢？要是可以定义多个边框不就好了吗？在上面，我们是用box-shadow来做边框效果的

同样，我们还是用box-shadow属性。但是其实box-shadow可以同时定义多个阴影的，写法如下

 div[id="yuan"]{ width:50px; height:50px;
 border:10px solid yellow;
  border-radius:100px;
 box-shadow:0 0 0 10px black,
     0 0 0 20px blue,
     0 0 0 30px red;}        

中间用"，"隔开就好了，没有数量限制。

分享图标

最后我们做一个分享的图标

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAsCAIAAAC1/0KWAAABhklEQVRoge3XIY6EMBQG4EoEggMgOQSGBMkBCFygYmQFBygawSE4BgKNRpJVCCQCUVHBCjKTTWZh286Dwqa/nCl/35cJHUDL/YN0DwAQY7hGjOEaMYZrxBiuEQ2GsixhCzUYEEKwDD0GhBClFKwQqkhiy2egGBIGJJOd+QSXaTbsTya1WI/hz/tV1ny24R3AGKvrGmMchqHnebZtK/x0hxhE1o/jSAjZGhqQcYiBc04pdRxHcPoPGfCGtm3TNJWd/kKGrutc1z0TAGxo2zYIgpMBkIZhGJIkOR8AacjzXAsAzDCO4/spZNt2FEVZlhVFUVVV0zR938/zDAsAMxBCXl9ZloUxbpqGMbbfo/mZ7+fnjLH1j8yyLErpNE0iPXqevbcMdV0jhHzf7/tesEfbO9CWAWMcxzHnXLBH57voluHxeIgDtkIIUb4WwNB1nfL2a9YjQflymHtaeftlWSilv551EoNJLN0+W5XzAtzYANJpDB/HGJ4lavsdEWMwBv2Gr/vnPxi+AZNafY8ZmGwCAAAAAElFTkSuQmCC" alt="" />

这个怎么做呢？我们可以把他分开来看，可以看成一个三角形，两个边框还有一个鹰嘴一样的图。

aaarticlea/png;base64,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" alt="" />

三角形和两个边框好做的，利用本文的第一部分讲的就能作了。关键是鹰嘴怎么做？

aaarticlea/png;base64,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" alt="" />

这样补齐是不是就是一个左上角为圆角的盒子了？

然后我们再把左边距的宽度缩小到0，是不是就是一个鹰嘴的图形了？

下面是分享图标的代码：

 div[id="hez1"]{
 width:10px; height:30px;
 border-top:5px solid #000;
 border-left:5px solid #000;
 border-right:5px solid white;
  position: absolute;}
 div[id="hez2"]{
 width:30px; height:5px;  border-top:5px solid white;
 border-right:5px solid  #000;border-bottom:5px solid #000;
 position: absolute;left:0px;top:15px;}

 div[id="yuanjiao"]{
 width:20px; height:20px;
 border-radius:20px 0 0 0;
 border-left:0px solid #000;
 border-top:10px solid #000;
 position: absolute;
 left:5px;top:-21px;
 }
  div[id="sanjiao"]{
 width:0px; height:0px;
 border-top:13px solid white;
 border-left:13px solid #000;
 border-bottom:13px solid white;
 border-right:0px solid white;
 position: absolute;
   left: 20px;
   top: -18px;}

 <div id="hez1">
 <div id="hez2">
 <div id="yuanjiao">
 <div id="sanjiao"></div>
 </div></div></div>

等等！！！你以为这样就完了？太天真了！！！

把背景改为红色看看!!!

aaarticlea/png;base64,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" alt="" />

这样就会发现，之前不管是三角形还是什么我们的边框设置的都是白色，而且分享图形放大了看会发现下面边框的一角被三角形挡住了。

aaarticlea/png;base64,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" alt="" />

怎么解决呢？很简单。吧他透明就好了，

rgba(r,p,g,a);其中A是透明度的意思，A为1 代表不透明，A为0代码100%透明。

rgba(255,255,255,0.0);以下是部分代码。

 div[id="sanjiao"]{width:0px; height:0px;
  border-top:13px solid rgba(255,255,255,0.0);
 border-left:13px solid #000;
 border-bottom:13px solid rgba(255,255,255,0.0);
 border-right:0px solid rgba(255,255,255,0.0);
 position: absolute;
   left: 20px;
   top: -18px;}

aaarticlea/png;base64,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" alt="" />

你以为这样就完了吗？不！还没完。

做为一个优秀的前端工程师，我们要用最简洁的代码写出最好的功能。

  div[id="one"]{width:10px; height:30px;
 border-top:5px solid #000;
 border-left:5px solid #000;
 border-right:5px solid rgba(255,255,255,0.0);
  position: absolute;}

  div[id="one"]:after{
 content:""; width:30px; height:5px;
  border-top:5px solid rgba(255,255,255,0.0);
 border-right:5px solid  #000;
 border-bottom:5px solid #000;
 position: absolute;left:0px;top:15px;
 }

 div[id="one"]:before{
 content:""; width:20px; height:20px;
  border-radius:20px 0 0 0;
 border-left:0px solid #000;
 border-top:10px solid #000;
 position: absolute;
 left:5px;top:-1px;
 }

 div[id="sanjiao2"]{width:0px; height:0px;
 border-top:13px solid rgba(255,255,255,0.0);
 border-left:13px solid #000;
 border-bottom:13px solid rgba(255,255,255,0.0);
  border-right:0px solid rgba(255,255,255,0.0);
 position: absolute;
   left: 25px;
   top: -10px;}

 <div id="one"><div id="sanjiao2"></div></div>

我们把上面的代码简化成只用两个DIV就能做出相同的效果。

下面是全部代码：

 <!DOCTYPE html>
 <HTML>
 <head>
 <style type="text/css">
 *{ margin:0px; padding:0px; border:0px; }
 body{ padding:20px;}
 div[id="duo1"]{width:0px; height:0px; border-top:50px solid rgba(255,255,255,0.0);
             border-left:50px solid rgba(255,255,255,0.0);
             border-bottom:50px solid #000;
             border-right:50px solid rgba(255,255,255,0.0);}

 div[id="zjsjx"]{width:0px; height:0px;
 border-top:50px solid rgba(255,255,255,0.0);
 border-left:50px solid blue;
 border-bottom:50px solid blue;
 border-right:50px solid rgba(255,255,255,0.0);}

 div[id="dcbk"]{ width:50px; height:50px; outline:10px solid blue; border:10px solid yellow;}

 div[id="dcbk2"]{ width:50px; height:50px;
 border:10px solid yellow;
 box-shadow:0 0 0 10px blue;}

 div[id="yuan"]{ width:50px; height:50px;
 border:10px solid yellow; margin:20px;
 border-radius:100px;
 box-shadow:0 0 0 10px black,0 0 0 20px blue,
                             0 0 0 30px red;}

   //分享图标的css代码
 div[id="hez1"]{width:10px; height:30px;
 border-top:5px solid #000;
 border-left:5px solid #000;
 border-right:5px solid rgba(255,255,255,0.0);
 position: absolute;}

 div[id="hez2"]{width:30px; height:5px;
 border-top:5px solid rgba(255,255,255,0.0);
 border-right:5px solid  #000;
 border-bottom:5px solid #000;
 position: absolute;left:0px;top:15px;}

 div[id="yuanjiao"]{width:20px; height:10px;
 border-radius:20px 0 0 0;
 border-left:0px solid #000;
 border-top:10px solid #000;
 position: absolute;
 left:5px;top:-21px;
 }

 div[id="sanjiao"]{width:0px; height:0px;
  border-top:13px solid rgba(255,255,255,0.0);
 border-left:13px solid #000;
 border-bottom:13px solid rgba(255,255,255,0.0);
 border-right:0px solid rgba(255,255,255,0.0);
 position: absolute;
   left: 20px;
   top: -18px;}

   //简化后分享图标的css代码
  div[id="one"]{width:10px; height:30px;
 border-top:5px solid #000;
 border-left:5px solid #000;
 border-right:5px solid rgba(255,255,255,0.0);
  position: absolute;}

  div[id="one"]:after{
 content:""; width:30px; height:5px;
  border-top:5px solid rgba(255,255,255,0.0);
 border-right:5px solid  #000;
 border-bottom:5px solid #000;
 position: absolute;left:0px;top:15px;
 }

 div[id="one"]:before{
 content:""; width:20px; height:20px;
  border-radius:20px 0 0 0;
 border-left:0px solid #000;
 border-top:10px solid #000;
 position: absolute;
 left:5px;top:-1px;
 }

 div[id="sanjiao2"]{width:0px; height:0px;
 border-top:13px solid rgba(255,255,255,0.0);
 border-left:13px solid #000;
 border-bottom:13px solid rgba(255,255,255,0.0);
  border-right:0px solid rgba(255,255,255,0.0);
 position: absolute;
   left: 25px;
   top: -10px;}

 </style>
 </head>
 <body>
 <div id="duo1"></div>
 <br>
 <div id="zjsjx"></div>
 <br>
 <div id="dcbk"></div>
 <br>
 <div id="dcbk2"></div>
 <br>
 <div id="yuan"></div>
 <br>
 <!--
 <div id="hez1">
 <div id="hez2">
 <div id="yuanjiao">
 <div id="sanjiao"></div>
 </div></div></div>
 -->

   //简化后分享图标的HTML代码
 <div id="one"><div id="sanjiao2"></div></div>
 </body>
 </HTML>

如果有什么疑问或者建议或者漏洞及错误欢迎指正，与我联系
==================================================================================================

本文为冷小包原创，转载请注明出处及作者。谢谢合作

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——冷小包著