网页中有很多符号图形，它们为页面增色不少。其中，最为常见要数三角形了。如果单纯的使用css来实现三角形，你会怎么做？下面的文章将介绍，如何使用css来制作三角形：

方法一：◆ 制作法

重点：采用了两个标签内文字“◆”，并通过设置这个字符的颜色，字体，和行高，以及字符的字体大小，然后利用绝对定位的布局方法达到三角形的效果。

注意点：“◆”必须使用同一字体，否则在各个浏览器的展现方式不一样。还有必须设置行高。但遗憾的是，尽管这种写法在很多浏览器都能达到我们想要的目的，可是ie6却不知为何会出现如效果图一三角形顶部多一像素的展现方式（这需有待研究…）。于是为达到浏览器的统一效果，我们只能对ie6进行hack处理。 最终我们看到是，效果图二：

在上面的图中，上面的未对ie6做兼容处理，而下面的则对ie6做兼容处理了。

<style>
.arrow_01{width:200px;height:100px;background:#ffffda;border:1px solid #d1b07c;margin:20px auto;position:relative;}
.arrow_01 span,.arrow_01 em{displaY:block;width:16px;height:16px;position:absolute;left:30px;font-family:"SimSun";font-size:16px;line-height:1;}
.arrow_01 span{color:#ffffda;bottom:-8px;_bottom:-9px;}
.arrow_01 em{color:#d1b07c;font-style:normal;bottom:-9px;_bottom:-10px;}
</style>

<div class="arrow_01">
    <em>◆</em>
    <span>◆</span>
</div>

方法二：边框 制作法

重点：利用某个标签的边框，并设置此元素的 width为0，height为0，line-height也为0 。然后只需要设置该标签三角的方向所在某一边框的颜色即可。见效果图：

<style>
.arrow_02{position:relative;width:100px;margin:0 auto;}
.arrow_02 span{display:block;width:0;height:0;line-height:0px;border:5px solid #fff;border-right:5px solid green;position:absolute;left:-10px;top:10px;}
</style>

<div class="arrow_02">
    <span></span>
</div>

总结：由于三角形的此类效果比较美观，简洁。于是它已经被越来越多的网站所采用，ui的人员也总喜欢把它加入到他们所设计的页面中，我们平时切这种三角形，在大多数情况下，都是直接把三角形做成一个绝对定位标签的背景。而以上两种方法则为我们以后对于三角形制作的方向提供了相应的参考。