HTML+CSS实现三角形图标的代码是啥

今天小编跟大家讲解下有关“HTML+CSS实现三角形图标的代码是什么”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

三角形图标运用于很多项目开发中，也是常用的素材之一，实现这个效果我们可以使用Html或者CSS进行绘制。

XML/HTML Code 复制内容到剪贴板nbsp;html>  

html lang="en">  

head>  

    meta charset="UTF-8">  

    title>Documenttitle>  

    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>  

以上就是关于“HTML+CSS实现三角形图标的代码是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，小编每天都会为大家更新不同的知识。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!