这篇文章主要为大家详细介绍了Html+CSS绘制三角形图标的相关代码，很多网页都有三角形的图标，通常是切的图片，这里可以用css3+html写出三角形，感兴趣的小伙伴们可以参考一下
先看看效果图：
XML/HTML Code
<!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>
<div id="test1"></div><br>
<div id="test2"></div><br>
<div id="test3"></div><br>
<div id="test4"></div><br>
<div id="test5"></div><br>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助
- 2016年烟台市职称论文要求通知
- 2016年鹤壁市淇滨区招聘教师面试命题范围及面试形式
- 2016年桂林市房地产估价师资格考试报名审核通知
- 临沂市2016年度出版专业技术人员职业资格考试考务工作有关问题通知
- 临沂市2016年度房地产估价师资格考试考务工作有关问题通知
- 临沂市2016年一级注册消防工程师资格考试考务工作有关问题通知
- 2016年河北省下半年翻译专业资格(水平)考试笔译考试考务工作通知(摘要)
- 2016年全国翻译硕士专业学位(MTI)教育试点单位名单公示
- 2015年洛阳市考试类证书领证通知(三)
- 2016年河北省下半年翻译专业资格(水平)考试组织非英语专业考试的省(市)公示
- 2016年河北省下半年翻译专业资格(水平)考试笔译考试工作计划
- 赣州市兴国县教育局领取2016年初中/小学及幼儿园教师资格证通知
- 2016年河北省一级注册消防工程师资格考试考务工作通知(摘要)
- 2016年河北省一级注册消防工程师资格考试工作计划
- 开展深圳市2016年度专业技术资格评审工作通知
- 2016年深圳市市属专业技术资格评审委员会联系方式和评审方式
- 烟台市牟平区2016年度一级注册消防工程师资格考试考务工作有关问题通知
- 青岛市市南区2016年一级注册消防工程师资格考试考务工作有关问题通知
- 青岛市2016年下半年翻译专业资格(水平)考试笔译考试考务工作通知
- 日照市2016年技师和高级技师申报评审工作通知
- 烟台莱州市转发2016年度山东省专业技术职务资格评审工作通知
- 2016年山东省专业技术职务资格评审工作通知
- 烟台市莱州市2016年度职称评审工作相关文件资料
- 烟台市莱州市2016年各系列评审材料报送(测试)时间表
- 2016年烟台市职称评审报名手册
- stable configuration
- stabled
- stable democracy
- stable entity
- stable environment
- stable equilibrium
- stable framework
- stable isotope
- stablemate
- stable orbit
- 荲
- 荳
- 荴
- 荵
- 荶
- 荷
- 荸
- 荹
- 荺
- 荻
- 四年级作文记一次游戏十篇
- 小学春游话题作文十篇
- 老师我想对您说五年级作文600字5篇
- 小学科学备课教案
- 小学拼音教学方法
- 下雪天作文600字精选5篇
- 消防安全作文400字一等奖精选10篇
- 小学一年级语文拼音教学方法
- 周末有趣的事一年级作文
- 劳动光荣一年级的作文