輸出CSSの国境の三角形が実現しています

1、HTML

<！ - 中空三角形- > 
<！ - アップトライアングル- > 
< divのクラス= "国境の空アップ" > 
    < スパン> </ スパン> 
</ divの> 
<！ - 下向き三角形- > 
< divのクラス= "ボーダーダウン・空" > 
    < スパン> </ スパン> 
</ divの> 
<！ - の左側にある三角形- > 
< divのクラス= "国境左空" > 
    < スパン> </ スパン> 
</ divの> 
<！ - 直角三角形- > 
< divのクラス= "のborder-right-空" > 
    < スパン> </ スパン> 
</ DIV >

2、CSS

.borderアップ空 { 
    幅：0。
    高さ：0 ; 
    国境左：30px固体透明。
    border-right：30px固体透明。
    border-bottom：30px固体＃333 ; 
    位置：相対 ; 
    マージン：は50px自動 ; 
} 
.borderアップ空スパン { 
    表示：ブロック。
    幅：0 ; 
    高さ：0; 
    ボーダー左：透明28pxソリッド ; 
    のborder-right：28pxソリッド透明 ; 
    のborder-bottom：28pxピンク色の固体 ; //白に、中空の三角形は、2行である場合。
    位置：絶対 ; 
    左：-28px ; 
    トップ：2ピクセル ; 
} 
.borderダウン空 { 
    幅：0 ; 
    高さ：0 ; 
    ボーダー左：30px固体透明 ; 
    ボーダー右：透明30px固体 ; 
    border-top：30px固体＃333 ; 
    位置：相対 ; 
    マージン：は50px自動 ; 
} 
.borderダウン空スパン { 
    表示：ブロック。
    幅：0 ; 
    高さ：0 ; 
    国境左：28px固体透明。
    border-right：28px固体透明。
    border-top：ピンク28px固体 ; 
    ポジション：絶対 ; 
    左：-28px ; 
    トップ：-30px ; 
} 
.border左空 { 
    幅：0。
    高さ：0 ; 
    border-bottom：30px固体透明。
    border-right：30px固体＃333 ; 
    border-top：30px固体透明。
    位置：相対 ; 
    マージン：は50px自動 ; 
} 
.border左空スパン{ 
    表示：ブロック。
    幅：0 ; 
    高さ：0 ; 
    border-bottom：28px固体透明。
    border-right：28pxソリッドピンク。
    border-top：28px固体透明。
    位置：絶対 ; 
    左：2ピクセル。
    トップ：-28px ; 
} 
.border右空 { 
    幅：0。
    高さ：0 ; 
    国境左：30px固体＃333 ; 
    border-bottom：30px固体透明。
    border-top：30px固体透明。
    位置：相対 ; 
    マージン：は50px自動 ; 
} 
.border空右スパン { 
    表示：ブロック。
    幅：0 ; 
    高さ：0 ; 
    国境左：ピンク28px固体 ; 
    border-bottom：固体透明28px ; 
    border-top：28px固体透明。
    位置：絶対 ; 
    左：-30px ; 
    トップ：-28px ; 
}

3、図の効果。

原則として2つの三角形は、位置及び色差を重畳します。