三角形图标运用于很多项目开发中，也是常用的素材之一，实现这个效果我们可以使用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中实现两边向中间背景渐变的方法是什么

  css中，可利用“background-image”属性和“linear-gradient()”函数来设置背景向两个方向渐变，语法为“元素{background-image:linear-gradient(方向,颜色1,颜色2,颜色3}”。

• HTML5项目中本地文件读写的方法操作是什么

  最近有这样一个需求就是如何读取或写入本地文件系统中的文件， html5来了它提供了一套文件系统的API，可以实现文件读写，本文就介绍了如何实现本地文件的读取和写入，感兴趣的可以了解一下

• CSS3实现照片墙的要点和代码是什么

  对于CSS3能做动漫应该很多小伙伴都知道，当我们自己想做照片墙效果的话要怎么做呢？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• css的:where和:is伪类怎样用？区别在哪？

  这篇文章主要给大家介绍css新增的两个伪类--:where（）和:is（）的内容，:where（）和:is（）伪类在功能上是差不多的，都可以缩短和停止创建选择器时的重复，但是两者还是有一定的区别。接下来我们就来具体了解看看css的:where和:is伪类怎样使用及区别是什么。

• 网页项目中因scrollbar使用占用空间出现错误如何解决

  这篇文章主要介绍了修复一个因为scrollbar占据空间导致的bug问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧