三角形图标运用于很多项目开发中，也是常用的素材之一，实现这个效果我们可以使用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边框向外扩散动画特效怎样实现的

  今天本篇文章给大家分享一个边框动画特效，看看使用CSS3如何实现边框阴影向外扩散的动画特效。我们先来看看效果图：下面我们来研究一下是怎么实现这个效果的：首先创建HTML部分，定

• CSS实现内凹圆角的效果有啥方法？

  这篇文章主要介绍了css实现div内凹角样式的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用CSS怎么写聚光灯效果，原理和代码是什么

  如何利用CSS制作一个聚光灯效果？下面本篇文章给大家分析一下实现原理，分享一下​CSS聚光灯效果的实现代码，希望对大家有所帮助！

• servlet中输出HTML标签的显示问题该怎么办

  protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType("text/html;charset=utf-8");

• 用CSS3制作双色圆环旋转动画的方法是什么

  方法：1、用border和border-radius属性将正方形元素变成圆环；2、用“圆环元素{animation:名称 时间}@keyframes 名称{100%{transform:rotate(旋转角度)}}”语句使圆环元素旋转即可。