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

猜你喜欢

• 在移动端如何用HTML5进行文件上传操作

  在PC端上传文件通常是使用插件引入即可，但是移动端使用这种操作，可能会导致项目的崩溃，所以移动端上传文件首选是H5，一起来了解一下。

• CSS中不清除浮动会怎么样，应该怎样做

  css清除浮动的原因：1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。2、使用浮动后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以打开其高度，所以父级元素的height会被忽略。

• 用CSS怎样实现进度条？一文教你三种效果

  今天给大家分享的是用CSS实现进度条的内容，本文给大家介绍了三种效果的进度条，分别是长形的，带有五个圆的线形和圆形的进度条，效果图如下，前两种实现比较简单的，这篇主要介绍圆形进度条的实现。感兴趣的朋友接下来跟随小编一起看看吧看吧。

• CSS中如何利用radio实现选择地址切换样式的效果

  这篇文章主要介绍了CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked，感兴趣的朋友跟随小编一起看看吧

• CSS对行间距设置可以怎样做，方法是什么

  css设置行间距的方法：1、使用数值来设置行间距，是拥有标准行高的段落。 默认行高大约是1。2、使用百分比设置行间距，line-height属性指定了一个百分数，则会相对于字体去计算行高。