前端html小技巧之三角形图标绘制

最新推荐文章于 2023-10-14 23:41:33 发布

云南仟龙Mark

最新推荐文章于 2023-10-14 23:41:33 发布

阅读量477

点赞数

文章标签：前端 html css

原文链接：https://blog.51cto.com/u_15111999/4663404

版权

今天分享下”前端html小技巧之三角形图标绘制“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。先看看效果图：

在这里插入图片描述

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: http://www.qlyl1688.com :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>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端html小技巧之三角形图标绘制

今天分享下”前端html小技巧之三角形图标绘制“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。先看看效果图：XML/HTML Code复制内容到剪贴板<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti
复制链接

扫一扫