CSSはヒントボックス、バブルボックス、三角形を作成します

。三角形{
        border-top:20px 赤一色;
        幅:50px;
        高さ:50px;
        border-right:20px 青一色; 
        border-bottom:20px グレー一色; 
        border-left:20px 緑一色;
   }

。三角形{
        border-top:20px 赤一色;
        幅:0px;
        高さ:0px;
        border-right:20px 青一色; 
        border-bottom:20px グレー一色; 
        border-left:20px 緑一色;
   } 

。三角形{
    border-top:20px 透明;
    幅:0px;
    高さ:0px;
    border-right:20px 透明、実線; 
    border-bottom:20px グレー一色; 
    border-left:20px 透明、実線;
   } 

。容器{
        位置:相対;
        上マージン:50px;
        パディング:6px 12px;
        色:#fff;
        フォントサイズ:16px;
        行の高さ:25px;
        幅:200px;
        高さ:50px;
        背景色:オレンジ;
        境界線の半径:4px;    
   }
   p.container:後{
        位置:絶対;
        上:-40px;
        右:20px;
        border-top:20px 透明;
        content:" "; // コンテンツを省略しないでください。省略すると表示されません。width:0px;
        高さ:0px;
        border-right:20px 透明、実線; 
        border-bottom:20px オレンジ一色; 
        border-left:20px 透明、実線;
   }


<p class="コンテナ">
    こんにちは。この記事では、CSS を使用してバブル フレームを作成する方法を説明します。
</p>