CSS描かれた三角形

：より転載https://www.cnblogs.com/jshaxclcc/p/10194724.html

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

 

 

 

＃三角形アップ { 
    幅：0。
    高さ：0 ; 
    border-left：は50px固体透明。
    ボーダー右：は50px固体透明。
    border-bottom：100pxに固体の赤。
}

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

 

＃三角形ダウン { 
    幅：0。
    高さ：0 ; 
    border-left：は50px固体透明。
    ボーダー右：は50px固体透明。
    border-top：100pxに固体の赤。
}

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

 

＃三角形左 { 
    幅：0。
    高さ：0 ; 
    border-top：は50px固体透明。
    border-right：100pxに固体の赤。
    border-bottom：は50px固体透明。
}

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

 

＃三角形右 { 
    幅：0。
    高さ：0 ; 
    border-top：は50px固体透明。
    border-left：100pxに固体の赤。
    border-bottom：は50px固体透明。
}

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

 

＃三角形TOPLEFT { 
    幅：0。
    高さ：0 ; 
    border-top：100pxに固体の赤。
    border-right：100pxに透明な固体 ; 
}

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

＃三角形topright { 
    幅：0。
    高さ：0 ; 
    border-top：100pxに固体の赤。
    border-left：100pxに透明な固体 ; 
 
}

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

＃三角形bottomleft { 
    幅：0。
    高さ：0 ; 
    border-bottom：100pxに固体の赤。
    border-right：100pxに透明な固体 ; 
}

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

 

＃三角形bottomright { 
    幅：0。
    高さ：0 ; 
    border-bottom：100pxに固体の赤。
    border-left：100pxに透明な固体 ; 
}