Css创建三角形的几种方法

最近，从网上看到了一篇关于用Css创建三角形的几种方法小结，感觉不错，对我的工作有老大的帮助了，所以想收集整理起来，以便以后方便查看。（原文地址：http://www.daqianduan.com/css-arrow-3/）

一：编码图片

　　假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

　　备注:

  　 有用的工具（用于图片转换成BASE64编码）

              http://webcodertools.com/imagetobase64converter

              http://image2base64.wemakesites.net/

　　优点：你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码

　　缺点：旧版本的浏览器，如：IE6/IE7是不兼容的；对于较大的图片，最终转换成字符串占用大小会很大，很大

 

二：CSS 边框

　　border的顺序是上 右 下 左；是相互叠加的，所以，当只有上边框有颜色，其他边框颜色为transprant时，会显示为三角形

　　–例子

     html部分

     <div id="method1"></div>

      CSS部分

  　#method1{width:0;height:0;border-style:solid;border-width:30px 20px 0 20px;border-color:#3d82d6   transparent transparent transparent}

　　优点：很容易的通过修改一些CSS代码属性值而更改颜色和大小，是一个跨浏览器的解决方案

　　缺点：IE6是不支持透明边界的，这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果

 

　　类似效果一：对角线效果

    　　html部分

     　　　<div id="diagonal">

             　　<span id="name">姓名</span>

             　　<span id="sex">性别</span>

 　　　   </div>

         CSS部分

  　　　　#diagonal{width:0;height:0;border-style:solid;border-width:50px 80px 0 0px;

              border-color:#3d82d6 #fff transparent transparent;position:relative}

              #diagonal span{position:absolute;display:block;width:30px;height:15px;color:#000;text-align:center;

               line-height:15px}

              #diagonal span#name{left:5px;top:-40px}

              #diagonal span#sex{left:40px;top:-20px}

　 　类似效果二：面包屑效果

   　　html部分

    　　 <ul class="demo">

            　　  <li class="current">面包屑一<em></em><i></i></li>

            　　  <li>面包屑二<em></em><i></i></li>

           　　  <li>面包屑二<em></em><i></i></li>

     　　  </ul>    

    　　 CSS部分

       　　   .demo{width:600px;background:#3d82d6;height:32px;overflow:hidden;line-height:32px;

       　　    position:relative;border-radius:5px}

       　　   .demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;}

          　　.demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;}

　　　　    .demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;

                   border-color:transparent  transparent transparent #3d82d6;border-style:solid;}

          　　.demo li.current{background:#276ab8;color:#fff;z-index:1;}

           　 .demo li.current i{border-color:transparent  transparent transparent #276ab8;}

　　 类似效果三：圆角对话框效果

     　　html部分

        　　 　　<div class="xsnazzy">

          　 　　　　 <div class="xboxcontent">

                         　　<p>你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、甚至在loading载入动画里。不管 你喜欢还是不喜欢，这些小元素对各UI元素之间的联系关系式很重要的

                        　　 </p>

              　　      </div>

             　　　　<em></em><span></span>

            </div>         

           CSS部分

 　　　　 .xsnazzy { margin:20px 0;}

             .xsnazzy p {margin:0 10px;letter-spacing:1px;padding-bottom:10px; color:#fff;}

             .xsnazzy em {display:block; width:0; height:0; border-style:solid;

                 border-width:12px 12px 0 12px;border-color:#fff transparent transparent transparent;

                 margin-left:50px;}

            .xsnazzy span {display:block; width:0; height:0; border-style:solid;border-width:10px 10px 0 10px;

                border-color:#3d82d6 transparent transparent transparent; margin-left:52px; margin-top:-15px;}

           .xboxcontent {display:block; background:#3d82d6; border:3px solid #fff;border-radius:5px; border-width:24px 0 24px 24px;border-color:transparent  　　transparent transparent #fff;border-style:solid;}

三：CSS 旋转正方形

　　理论上,这种方式，你需要使用两个内容块，但是，并没有限制是使用两个元素，所以可以使用一个元素加一个伪元素。

　　–例子

  　 html部分

　　　　<div id="diagona3"></div>

　　CSS部分

　　　　#diagona3{width:50px;height:50px;position:relative;overflow:hidden}

　　　　#diagona3:after{content: "";position: absolute;top:-20px;left: 5px;width:35px;height:35px;border: 2px solid #3d82d6;-webkit-transform: rotate(45deg);

　　　　　　-moz-transform: rotate(45deg);-ms-transform: rotate(45deg); background:linear-gradient(#3d81d5, #286bb9) repeat scroll 0 0 transparent;}

　　 优点：CSS3阴影，渐变等可以更多的使用

　　 缺点：这个解决方案不是跨浏览器的,首先是因为CSS3旋转

 

四：HTML5 Canvas

　　

　　–例子

　　html部分

　　　　<canvas id="triangle" height="50" width="50">Triangle</canvas>

　　javascript部分

　　　　<script type="text/javascript">

　　　　　　var canvas = document.getElementById('triangle');

　　　　　　var cxt = canvas.getContext(‘2d’);//取得图形上下文

　　　　　　cxt.beginPath();//开始创建路径

　　　　　　cxt.moveTo(0, 0);

　　　　　　cxt.lineTo(50, 0);

　　　　　　cxt.lineTo(25, 50);

　　　　　　cxt.closePath();//路径关闭

　　　　　　cxt.fillStyle = “rgb(61, 129, 213)”;//填充颜色

　　　　　　cxt.fill();//填充 

　　　　　　cxt.stroke();绘制边框

　　　　</script>

转载于:https://www.cnblogs.com/ranran2011/archive/2013/04/08/3007434.html