关于Html和CSS绘制三角形图标的方法

先看看效果图：

 !doctype html  html lang= en  head  meta charset= UTF-8  title Document /title  style type= text/css  #test1 {  height:20px;  width:20px;  border-color:#FF9600 #3366ff #12ad2a #f0eb7a;  border-style:solid;  border-width:20px;  #test2 {  height:0;  width:0;  overflow: hidden; /* 这里设置overflow, font-size, line-height */  font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */  line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */  border-color:#FF9600 #3366ff #12ad2a #f0eb7a;  border-style:solid;  border-width:20px;  #test3 {  height:0;  width:0;  overflow: hidden;  font-size: 0;  line-height: 0;  border-color:#FF9600 transparent transparent transparent;  border-style:solid;  border-width:20px;  #test4 {  height:0;  width:0;  overflow: hidden;  font-size: 0;  line-height: 0;  border-color:#FF9600 transparent transparent transparent;  border-style:solid dashed dashed dashed;  border-width:20px;  }/*兼容IE6*/  #test5 {  height:0;  width:0;  overflow: hidden;  font-size: 0;  line-height: 0;  border-color:#FF9600 #3366ff transparent transparent;  border-style:solid solid dashed dashed;  border-width:40px 40px 0 0 ;  /style  /head  body  p id= test1 /p br  p id= test2 /p br  p id= test3 /p br  p id= test4 /p br  p id= test5 /p br  /body  /html 

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP ！

相关推荐：

用HTML5 Canvas来绘制三角形和矩形等多边形的方法

使用HTML5和CSS3实现生日蛋糕的制作

以上就是关于Html和CSS绘制三角形图标的方法的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。