簡単な実装CSSの三角形中空三角形

<スタイル>    
#talkbubble {    
幅：120ピクセル;   
高さ：80px;   
位置：相対;   
-mozボーダー半径：10pxの。   
-webkitボーダー半径：10pxの。   
国境半径：10pxの;   
国境：1pxの＃808080固体;   
背景色：#FFF;   
}    
  
#talkbubble：{前    
内容： "「。   
位置：絶対;   
トップ：100％;   
左：は50px;   
幅：0;   
高さ：0;   
国境左：15ピクセル固体透明。   
border-top：15ピクセル固体＃808080;   
border-right：15ピクセル固体透明。   
}    
  
.inlayer：{後に    
内容： "「。   
位置：絶対;   
トップ：100％;   
左：51px;   
幅：0;   
高さ：0;   
国境左：14px固体透明。   
border-top：14px固体#FFF;   
border-right：14px固体透明。   
}    
  
#talkbubble：ホバー{    
背景色：＃1 FF0000;   
}    
  
.inlayer：ホバー：{後    
幅：0。   
高さ：0;   
国境左：14px固体透明。   
border-top：14px固体＃1 FF0000;   
border-right：14px固体透明。   
}    
</スタイル>    
  
<！ - HTML - >    
<DIV ID = "talkbubble"クラス= "入口層">    
空心三角形    
</ div>   

　　オープン三角原則：擬似クラスの使用の主な要素（：の後,:前に）達成するために

 

 さらに上向き三角形取り付けCSSコード

.tip-EM { 
    幅：12ピクセル。
    高さ：12ピクセル; 
    位置：絶対; 
    左：80px; 
    トップ：-10px; 
    } 
    .em1 { 
      位置：絶対。   
      下：100％;   
      左：は50px;   
      幅：0;   
      高さ：0;   
      国境左：15ピクセル固体透明。   
      border-bottom：15ピクセル固体＃808080;   
      border-right：15ピクセル固体透明。  
    } 
    .em2 { 
      位置：絶対。   
      下：100％;   
      左：51px;   
      幅：0;   
      高さ：0;   
      国境左：14px固体透明。   
      border-bottom：14px固体#FFF;   
      border-right：14px固体透明。
    }