使用CSS3来制作三角形，首先看下图，如何实现呢
实现原来，首先，弄一个DIV，然后把DIV的边框设置为上述的颜色。然后，在DIV里面，加一个<em></em>，设置其位置至DIV的下面，然后再设置其形状为三角形。
下面看代码吧。
①HTML代码
<div class="tag">
<em></em>大众计算机学习网
</div>
②CSS代码
.tag
{
width: 200px;
height: 50px;
border: 2px solid #09F;
position: relative;
padding:10px;
}
.tag em
{
display: block;
border-width: 20px;
position: absolute;
bottom: -40px;
left: 100px;
border-style: solid dashed dashed;
border-color: #09F transparent transparent;
font-size: 0;
line-height: 0;
}
注意看上面的代码哦。
知识拓展：在上述的基础上，我们还可以设置如下图的三角形效果。
看看上面的效果，是不是有点炫酷了，其实，稍微动点脑子都能想出来。根据上述的效果，然后，再增加一个span对象，该对象的背景颜色是白色，位置刚好位于<em></em>上方一点，效果就出来了。下面看代码。
<div class="tag">
<em></em><span></span>大众计算机学习网
</div>
CSS代码如下。
.tag
{
width: 200px;
height: 50px;
border: 2px solid #09F;
position: relative;
padding:10px;
}
.tag em
{
display: block;
border-width: 20px;
position: absolute;
bottom: -40px;
left: 100px;
border-style: solid dashed dashed;
border-color: #09F transparent transparent;
font-size: 0;
line-height: 0;
}
.tag span
{
display: block;
border-width: 20px;
position: absolute;
bottom: -38px;
left:100px;
border-style: solid dashed dashed;
border-color: #FFF transparent transparent;
font-size: 0;
line-height: 0;
}