三角形图标运用于很多项目开发中，也是常用的素材之一，实现这个效果我们可以使用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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS中怎样能选第三个li元素，方法是什么

  在css中，可以利用“:nth-child(n)”选择器来选择第三个li元素，该选择器的作用就是选择父元素下的第n个子元素，当选择器中的数字为3时，会选择第3个元素，语法为“li:nth-child(3){css样式代码;}”。

• CSS中怎样控制播放动画次数，使用什么方法？

  这篇文章给大家分享的是CSS中控制播放动画次数的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 用CSS怎样画一个箭头图标，有哪些实现方法

  这篇文章主要介绍了CSS拾遗之箭头,目录,图标的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

• 使用css怎样做一个伸缩input搜索框效果？

  使用css怎样做一个伸缩input搜索框效果？在实际的项目中，我们常会遇到搜索框的实现需求，下文实现的搜索框效果是可伸缩的搜索框，实现效果如下，这里会使用到css3+贝塞尔曲线这个效果。

• 基于HTML九宫格原理如何做网页布局，方法是什么

  这篇文章主要介绍了HTML利用九宫格原理进行网页布局,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧