小さな三角形を実装する CSS_html/css_WEB-ITnose

トライアングルアップ

1 2 3 4 5 6 7

#triangle-up { width : 0 ; 高さ : 0 ; 境界左 : 50px 単色透明 ; border-right : 50px 単色透明 ; border-bottom : 100px 赤一色 ; }

トライアングルダウン

1 2 3 4 5 6 7

#triangle-down { 幅 : 0 ; 高さ : 0 ; 境界左 : 50px 単色透明 ; border-right : 50px 単色透明 ; ボーダートップ : 100px 単色赤 ; }

左三角

1 2 3 4 5 6 7

#triangle-left { 幅 : 0 ; 高さ : 0 ; ボーダートップ : 50px 単色透明 ; ボーダー右: 100 ピクセルの赤一色。 border-bottom : 50px 単色透明 ; }

三角右

1 2 3 4 5 6 7

#triangle- right { width : 0 ; 高さ : 0 ; ボーダートップ : 50px 単色透明 ; ボーダー左 : 100px 赤一色 ; border-bottom : 50px 単色透明 ; }

左上の三角形

1 2 3 4 5 6

#triangle-topleft { 幅: 0 ; 高さ : 0 ; ボーダートップ : 100px 単色赤 ; border-right : 100px 単色透明 ; }

右上三角形

1 2 3 4 5 6 7

#triangle-topright { 幅 : 0 ; 高さ : 0 ; ボーダートップ : 100px 単色赤 ; 境界左 : 100px 単色透明 ; }

左下の三角

右下の三角形

1 2 3 4 5 6

#triangle-bottomleft { 幅 : 0 ; 高さ : 0 ; border-bottom : 100px 赤一色 ; border-right : 100px 単色透明 ; }

1 2 3 4 5 6

#triangle-bottomright { 幅 : 0 ; 高さ : 0 ; border-bottom : 100px 赤一色 ; 境界左 : 100px 単色透明 ; }