今天小编跟大家讲解下有关使用css画三角形的方法代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用css画三角形的方法代码 的相关资料，希望小伙伴们看了有所帮助。
用纯css画个三角形以下是源代码：复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><head><title>用纯css画个三角形</title></head><body><style type="text/css">.rightdirection{width:0;height:0;line-height:0;border-width:20px;border-style:solid;border-color:transparent transparent transparent #A9DBF6;}.bottomdirection{width:0;height:0;line-height:0;border-width:20px;border-style:solid;border-color: #A9DBF6 transparent transparent transparent;}.leftdirection{width:0;height:0;line-height:0;border-width:20px;border-style:solid;border-color: transparent #A9DBF6 transparent transparent;}.topdirection{width:0;height:0;line-height:0;border-width:20px;border-style:solid;border-color: transparent transparent #A9DBF6 transparent;}</style><div class="rightdirection"></div><p><div class="bottomdirection"></div><p><div class="leftdirection"></div><p><div class="topdirection"></div></body></html>画个小三角形复制代码代码如下:<style>#jb51_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}</style><div id="jb51_a"></div>以下代码兼容IE6：复制代码代码如下:<style>b.sanjiao{display:inline-block;width: 0;height: 0;border-width: 10px 10px;border-style: dashed dashed solid dashed;border-color: transparent transparent #ff0000;font-size: 0;line-height: 0;-moz-transition: -moz-transform .2s ease-in;-o-transition: -o-transform .2s ease-in;transition: transform .2s ease-in;vertical-align:text-top;margin-left:5px}</style><b class="sanjiao"></b>来源：爱蒂网
