css绘制三角形

<!-- 向上的三角形 -->
<div class="triangle_border_up"></div>
                                                      
<!-- 向下的三角形 -->
<div class="triangle_border_down"></div>
                                                      
<!-- 向左的三角形 -->
<div class="triangle_border_left"></div>
                                                      
<!-- 向右的三角形 -->
<div class="triangle_border_right"></div>

/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
}

气泡框



<!-- 气泡框 -->
<div class="tip-up">
<span><em></em></span>纯CSS写带边框的三角形
</div>

.tip-up{
width:100px;
background:#fc0;
padding:10px 20px;
color:#333;
border-radius:4px;
position:relative;
top:30px;
left:30px;
border:1px solid #333;
}
.tip-up span{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #333;
position:absolute;
top:-10px;
left:50%;/* 三角形居中显示 */
margin-left:-10px;/* 三角形居中显示 */
}
.tip-up em{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #fc0;
position:absolute;
top:1px;
left:-10px;
}