CSS 三角形

效果：

.arraw{
display: inline-block;
width: 0px;
height: 0px;
}
.down{
border-top: 12px solid #000;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-bottom: 0px solid #000;
}
.up{
border-bottom: 12px solid #000;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 0px solid #000;
}
.left{
border-right: 12px solid #000;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 0px solid #000;
}
.right{
border-left: 12px solid #000;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 0px solid #000;
}

Test Text
实现代码：

<div>

<span class="arraw down"></span>

<span class="arraw up"></span>

<span class="arraw left"></span>

<span class="arraw right"></span>

Test Text

</div>

[/code] 样式代码：

.arraw{

display: inline-block;

width: 0px;

height: 0px;

}

.down{

border-top: 12px solid #000;

border-right: 6px solid transparent;

border-left: 6px solid transparent;

border-bottom: 0px solid #000;

}

.up{

border-bottom: 12px solid #000;

border-right: 6px solid transparent;

border-left: 6px solid transparent;

border-top: 0px solid #000;

}

.left{

border-right: 12px solid #000;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

border-left: 0px solid #000;

}

.right{

border-left: 12px solid #000;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

border-right: 0px solid #000;

}

[/code]

来自为知笔记(Wiz)