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

1. nbsp;html>  
2. html lang="en">  
3. head>  
4.     meta charset="UTF-8">  
5.     title>Documenttitle>  
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.   

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3中设置颜色的透明度方法是什么

  写法：1、“rgba(红色,绿色,蓝色,透明度)”；rgba()函数通过红绿蓝三色叠加来生成各种颜色并控制颜色的透明度；2、“hsla(色相,饱和度,亮度,透明度)”；hsla()函数通过色相、饱和度和亮度来定义颜色并控制颜色的透明度。

• cCSS中如何实现和控制图片缓慢隐藏

  方法：1、利用animation属性给图片元素绑定动画；2、利用“@keyframes”规则控制动画动作，实现渐渐隐藏效果，语法为“@keyframes 动画名{0%{opacity:1}100%{opacity:0}}”。

• CSS3中有哪些新加的背景属性，怎么使用

  CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性，感兴趣的朋友跟随小编一起看看吧

• CSS中怎样引用@font-face，使用方法是什么

  这篇文章主要介绍了css中引入指定字体@font-face兼容各浏览器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• 如何使用HTML5+JS制作动态音频图，方式及过程是什么

  这篇文章主要介绍了HTML5开发动态音频图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧