CSS3は、三角形やダイアログボックスを達成します

これは究極の効果は、スタイルマイクロチャンネルダイアログに似て達成されています。

小さな三角形と四角形で構成されるこのダイアログボックスの構造を分析します。長方形はCSS3の小さな三角形を作成する方法に焦点を当てて、容易に達成することができます。

まず、三角形をどのように生成します

要約：三角形の高さ幅が0に設定され、境界スタイルの四辺からなる四角枠は、つなぎ合わせ4つの三角形の効果を得、次いで透明に他の方向に境界線の色を設定するために設けられています。

全ての第1は、正方形0PXに設定されている通常の構成要素に加えて達成する背景色が、その長さと幅の一つの要素ではない四角形を行い、これはボックス領域の内容を消失することと等価です。内容： "";

■は { 
        ボーダー：は50px固体#aff。
        幅：0PX。高さ：0PX。
        マージン：は50px自動 ; 
    }

その後、2、及び各個々のスタイルの境界線を設定し、次の4つの三角形の効果がつなぎ合わせてどのように見ることができます。

■は { 
        ボーダートップ：100pxに固体#aff。
        国境左：100pxに固体#faf。
        border-right：100pxに固体#afa。
        border-bottom：100pxに固体#ffa。
        幅：0PX。高さ：0PX。マージン：は50px自動 ; 
    }

図3に示すように、単一の三角形の境界の半分を取って、得られた、境界の色が設定他の透明 透明

これは、三角形を取得します。

第二に、ボックスを作ります

設定ダイアログが丸め境界-radiu Sを、一定の距離からテキスト枠が設けられているため、パディングようにパディングテキスト垂直中心、行の高さ。

::前にコンテンツを追加する要素の前に擬似要素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .main{
        background-color: #6a6;
        margin:50px auto;padding:16px;
        width:200px;height:25px;
        border-radius: 10px;line-height: 25px;
        position: relative;
    }
    .main::before{
        content:" ";
        border-left: 0px solid #6a6;
        border-top:10px solid transparent;
        border-right:10px solid #6a6;
        border-bottom:10px solid transparent;
        position: absolute;left:-10px;top:18px;
    }
    /*::before伪元素在元素前面添加内容;*/
    </style>
</head>
<body>
    <div class="main">Hello World ! </div>
</body>
</html>