Html+CSS绘制三角形图标_CSS_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • CSS

    当前位置:主页 > 网页制作 > CSS >

    Html+CSS绘制三角形图标

    时间:2019-08-13|栏目:CSS|点击:
  • Html+CSS绘制三角形图标

    先看看效果图:

    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>  

    上一篇:HTML5上传文件显示进度的实现代码

    栏    目:CSS

    下一篇:只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)

    本文标题:Html+CSS绘制三角形图标

    本文地址:http://www.jh-floor.com/wangyezhizuo/CSS/20137.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号