純粋な CSS で遊ぶ Triangles_html/css_WEB-ITnose

CSS3が普及した現代では、canvas、svg、linear-gradient、radio-gradientを使って様々なグラフィックを描画することができます。

しかし、CSS2 の時代には、三角形を描画することは新しいことではありませんでした。ここでは、ご自身の便宜のために簡単な概要を示します。

<div class="triangle-up"></div>

一般的な構造を書きます。

        .triangle-up { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

このようにスタイルを書くと、border-right が設定されていないため、三角形の鋭い角は右を指します。空間的想像力を駆使してこれを理解してください。紙に描くだけです。

三角形の先端を上に向けたい場合は、border-top を設定しないでください。

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

同じ原理:
三角形のマイナスが左向き:

#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

三角形のマイナスが下向き:

#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

もちろん、border-top を 100px 赤に設定し、border-left を 100px 透明に設定すると、犬耳が得られます。効果:

#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

このようにして 4 つの方向を設定できます。原則は同じです。
http://codepen.io/tianzi77/pen/WQeGmx

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。