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;
}