純粋なCSSのdivがシームレスに鋭いボックスを達成します

私たちは、最初のマップ上で非常に直接的な影響を話をしませんでした

 

実際には、非常に単純な原理、それが最後の位置を特定することにより達成ボーダープラス黒三角と白の三角形の箱、です。

コードは以下の通りであります：

div要素にHTML

< DIV > </ DIV >

CSS

DIV { 
            位置：相対。
            幅：200pxの。
            高さ：100pxに。
            ボーダー：2ピクセル固体＃000 ; 
            マージントップ：100ピクセル ; 
       } 
       DIV ::前に、DIV ::後 { 
            表示：インラインブロック。
            内容：'' ; 
            位置：絶対 ; 
            ボーダー：透明20ピクセル固体; 
       } 
       DIV ::前 { 
            左：60PX。
            トップ：-42px ; 
            border-bottom-色： ＃000 ; 
       } 
       DIV ::後 { 
            左：60PX。
            トップ：-39px ; 
            border-bottom-色：#FFF ; 
       }