純粋な CSS 描画三角形 (さまざまな角度)_html/css_WEB-ITnose

CSS のおかげで、私たちの Web ページのスタイルは常に変化しています。この一見シンプルなスタイル言語は、非常に柔軟に使用でき、創造力を発揮すれば、想像を絶するような効果を実現できます。特に CSS3 の普及により、より斬新な CSS 作品が登場しています。

今日は CSS の三角形の描画方法をお届けします

次のようにコードをコピーします:

#triangle-up {
width: 0;
height: 0;
border-left: 50px Solid traditional;
border - 右: 50px ソリッド透明;
border-bottom: 100px ソリッドレッド;
}

次のようにコードをコピーします:

#triangle-down {
width: 0;
height: 0;
border -left : 50px ソリッド透明;
border-right: 50px ソリッド透明;
border-top: 100px ソリッドレッド;
}

次のようにコードをコピーします:

#triangle-left {
width: 0;
高さ: 0;
ボーダー上: 50 ピクセル ソリッド レッド;
ボーダー-ボトム: 50 ピクセル ソリッド 透明;
幅: 0;
高さ: 0; border-top: 50px 単色透明;
border-left: 100px 単色赤;

border-bottom: 50px 単色透明;

}

コードをコピー 以下のように:


#triangle-topleft {
width : 0;
height: 0;
border-top: 100px 単色赤;
border-right: 100px 単色透明;

}

次のようにコードをコピーします:


#triangle-topright {
width : 0;
高さ: 0;
border-top: 100px ソリッドレッド;
border-left: 100px ソリッド透明

}

次のようにコードをコピーします:


#triangle-bottomleft {
width : 0;
height: 0;
border-bottom: 100px 単色赤;
border-right: 100px 単色透明;

}

次のようにコードをコピーします:


#triangle-bottomright {
width : 0;
高さ: 0;
ボーダー下: 100 ピクセル赤一色;
ボーダー左: 100 ピクセル透明;

}