便利帳

自分用備忘録。誰かの役に立てたら幸いです。

CSS:三角形を作る

CSSを使って三角形を作る方法をまとめます。

<p class="triangle "></p>

HTMLで三角形を設置したい場所に上記のように記載します。

.triangle {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #F08080;

CSSで上記のようにすれば左向きの三角形ができます。

文頭の見出しなどに使いたい場合は、

    display: inline-block;

を追加すれば横並びになります。

現在5pxと記載している部分で三角形の大きさが、
一番下のカラーコードの部分で三角形の色が指定できます。