网站中不论是导航还是下拉，往往有些小三角，制作方式有几下几种：
方法一
主要思想：使用一个矩形，盖住一个菱形的上半部分，则显示下三角；盖住下半部分，则显示上三角。主要代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>小三角</title><meta content="主要思想：使用i和s标签，i为矩形框，s为菱形(输入法，软键盘的特殊符号）,i覆盖s，盖住菱形上半部分，则显示下三角；调整定位的top值，即可显示上三角" ><style>body{margin: 0;padding: 0;font-size: 15px;}.fl{float: left;}i,s{font-weight: normal;font-style:normal;text-decoration: none;}.header{height: 30px;line-height: 30px;background-color: #f1f1f1;}.header .banxin{width: 980px;margin: 0 auto;}.header .banxin .sendArea{display: inline-block;padding: 0 25px 0 15px;background-color: pink;position: relative;}.header .banxin .sendArea i{display: inline-block;width: 15px;height: 7px;background-color: yellow;position: absolute;top:12px;right:5px;overflow: hidden;}.header .banxin .sendArea i s{font: 400 15px/15px "宋体";position: absolute;top:-6px;right: 0;}</style></head><body><div class="header"><div class="banxin"><div class="sendArea fl">送至范围：杭州<i><s>◇</s></i></div></div></div></body></html>
注：特殊符号为空菱形◇，则为两条边的小三角。
将特殊符号改为实体菱形◆，则为实体小三角。比较灵活，但需要输入法的软键盘帮助！
方法二：
主要思想：两个三角(三角的制作方法可参考下一篇-实体小三角)，①号三角为背景颜色，②号三角为箭头颜色，①号盖住②号，露出一个角。主要代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>淘宝三角</title><!-- 主要思想：两个三角叠加，上面的为白色，盖住红色，露出一个小三角 --><style>body{margin: 0;padding: 0;font-size: 15px;}.fl{float: left;}i,s{font-weight: normal;font-style:normal;text-decoration: none;}div.banxin{width:980px;height:30px;margin:0 auto;background-color: #f1f1f1;}/*以上为基本设置和版心设置*/div.content{height:30px;line-height: 30px;background-color: pink;padding: 0 25px 0 10px;position: relative;}div.content b{display: inline-block;height: 0;width: 0;border-width:8px;border-color: red transparent transparent transparent;border-style: solid dashed dashed dashed;}div.content .one{border-color: pink transparent transparent transparent;position: absolute;top:10px;right:5px;z-index:1;}div.content .two{position: absolute;top:11px;right:5px;}</style><script> </script></head><body><div class="banxin"><div class="content fl">我是向下的小箭头，只有两条边哦<b class="one"></b><b class="two"></b></div></div></body></html>
![三角形描边css [CSS] tips带有描边的小箭头](https://900zi.500zi.com/uploadfile/img/14/885/644746c0f1b1769e4a5b6f253f5e492c.jpg)
