• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html+CSS绘制三角形图标

    先看看效果图：

    XML/HTML Code复制内容到剪贴板
    1. <!doctype html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Document</title>  
    6.     <style type="text/css">  
    7.         #test1 {   
    8.             height:20px;   
    9.             width:20px;   
    10.             border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
    11.             border-style:solid;   
    12.             border-width:20px;   
    13.         }   
    14.         #test2 {   
    15.             height:0;   
    16.             width:0;   
    17.             overflow: hidden; /* 这里设置overflow, font-size, line-height */   
    18.             font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */   
    19.             line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */   
    20.             border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
    21.             border-style:solid;   
    22.             border-width:20px;   
    23.         }   
    24.         #test3 {   
    25.             height:0;   
    26.             width:0;   
    27.             overflow: hidden;   
    28.             font-size: 0;   
    29.             line-height: 0;   
    30.             border-color:#FF9600 transparent transparent transparent;   
    31.             border-style:solid;   
    32.             border-width:20px;   
    33.         }   
    34.         #test4 {   
    35.             height:0;   
    36.             width:0;   
    37.             overflow: hidden;   
    38.             font-size: 0;   
    39.             line-height: 0;   
    40.             border-color:#FF9600 transparent transparent transparent;   
    41.             border-style:solid dashed dashed dashed;   
    42.             border-width:20px;   
    43.         }/*兼容IE6*/   
    44.         #test5 {   
    45.             height:0;   
    46.             width:0;   
    47.             overflow: hidden;   
    48.             font-size: 0;   
    49.             line-height: 0;   
    50.             border-color:#FF9600 #3366ff transparent transparent;   
    51.             border-style:solid solid dashed dashed;   
    52.             border-width:40px 40px 0 0 ;   
    53.         }   
    54.     </style>  
    55. </head>  
    56. <body>  
    57.     <div id="test1"></div><br>  
    58.     <div id="test2"></div><br>  
    59.     <div id="test3"></div><br>  
    60.     <div id="test4"></div><br>  
    61.     <div id="test5"></div><br>  
    62. </body>  
    63. </html>  
    64.   

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    上一篇：多种实例解析HTML表单form的使用方法
    下一篇：HTML语法大全_html语言语法大全(必看)
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Html+CSS绘制三角形图标 Html+CSS,绘制,三角形,图标,