网页开发中经常遇到一些很小的三角形修饰，提示框箭头方向等问题，下面记录下自己开发过程中用到的一些css样式。
一、用css实现小三角形效果
提到小三角形，很多人可能直接使用图片，使用图片的缺点就是要调整大小或颜色或箭头方向时不太方便，这里介绍一个使用css样式实现的小三 角形效果，要修改成自己想要的效果非常方便。
先在 html 代码里 定义一个 <i> 标签，定义 class 属性，
triangle{
display:inline-block;
5px solid transparent;样式说明：position:absolute; top:9px; right:16px;这几个样式是因为定位问题要使用到的样式，因为在实际应用中，小三角形图标一般是依附在父节 点的旁边作修饰作用的，所以一般会使用到定位。
border-bottom:5px solid #3BA2EB; 底边框正常显示，左、右、上的边框都是透明的，看不见的，最终 展现的效果就是一个箭头向上的小三角形，如图所示：
。如果你对这个有兴趣的话，可以自己尝试修改一下边框宽度、箭头方向、边框颜色等看 下实际效果。
二、用三角形原理实现提示框
根据上面的三角形原理可以制作出各种方向的提示框，效果如下：
代码粘上如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提示框示例</title>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
body{font-size:14px;font-family:"微软雅黑"}
.content{width:100%;height:100%;position:relative;}
.tips{display:inline-block;width:200px;height:30px;border:1px solid #FE9898;border-radius:4px;line-height:22px;padding:5px;}
.tips .tipsDirec{width:0px;height:0px;border-width:10px;border-style:solid;}
/*向上方向*/
#topTipFrame{position:absolute;top:100px;left:100px;}
#topDirec1{position:absolute;top:-20px;left:11px;border-color:transparent transparent #FE9898 transparent;}
#topDirec2{position:absolute;top:-19px;left:11px;border-color:transparent transparent #fff transparent;}
/*向右方向*/
#rightTipFrame{position:absolute;top:100px;left:500px;}
#rightDirec1{position:absolute;top:11px;right:-20px;border-color:transparent transparent transparent #FE9898;}
#rightDirec2{position:absolute;top:11px;right:-19px;border-color:transparent transparent transparent #fff;}
/*向下方向*/
#downTipFrame{position:absolute;top:240px;left:100px;}
#downDirec1{position:absolute;bottom:-20px;left:11px;border-color:#FE9898 transparent transparent transparent;}
#downDirec2{position:absolute;bottom:-19px;left:11px;border-color:#fff transparent transparent transparent;}
/*向左方向*/
#leftTipFrame{position:absolute;top:240px;left:500px;}
#leftDirec1{position:absolute;left:-20px;top:11px;border-color:transparent #FE9898 transparent transparent;}
#leftDirec2{position:absolute;left:-19px;top:11px;border-color:transparent #fff transparent transparent;}
</style>
</head>
<body>
<div class="content">
<!--方向向上提示框 start -->
<div id="topTipFrame" class="tips">
<span id="topDirec1" class="tipsDirec"></span>
<span id="topDirec2" class="tipsDirec"></span>
箭头向上提示框示例
</div>
<!--方向向上提示框 end -->
<!--方向向右提示框 start -->
<div id="rightTipFrame" class="tips">
<span id="rightDirec1" class="tipsDirec"></span>
<span id="rightDirec2" class="tipsDirec"></span>
箭头向右提示框示例
</div>
<!--方向向右提示框 end -->
<!--方向向下提示框 start -->
<div id="downTipFrame" class="tips">
<span id="downDirec1" class="tipsDirec"></span>
<span id="downDirec2" class="tipsDirec"></span>
箭头向下提示框示例
</div>
<!--方向向下提示框 end -->
<!--方向向左提示框 start -->
<div id="leftTipFrame" class="tips">
<span id="leftDirec1" class="tipsDirec"></span>
<span id="leftDirec2" class="tipsDirec"></span>
箭头向左提示框示例
</div>
<!--方向向左提示框 end -->
</div>
</body>
</html>以上代码css部分很多代码重复了，后面实际需要的时候可以进行重构优化。
可以设置三角形边框的width height 不同值设置不规则的三角形状，制作出不规则的提示箭头等，但是自己做出的效果会在有些浏览器展示出锯齿效果，不规则的箭头还是没有图片稳定。
好了，用css实现三角形效果就暂时写到这里了，希望在后面的工作学习中可以帮到自己或者别人。
