お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    WordPressのスキルアップ!▶

    【CSS】吹き出しのような三角形の形を作る方法

    CSS(シー・エス・エス)
    この記事は約2分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    例えば、ワードプレスなどでアイコンをクリックした際に画面が表示されるような場合に、吹き出しっぽく三角形▲←のような形を作りたいと思った時に使える方法です。

    borderプロパティで作る

    以前も書いたのですが、borderプロパティを使うことで「三角形」の形を表現可能です。

    <div class="triangle"></div>
    <style>
    .triangle{
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid red;
    width: 0;
    height: 0;
    }
    </style>

    例えば上向きの三角形にしたい場合は、border-bottomを除いたそれぞれの部分を transparent で透明にしておき、残った部分(今回の場合は border-bottom)のみ色を指定すると、上向きの三角形となります。

    まとめ

    あとは、20pxの部分を調整することで三角形のサイズを、redの部分を調整することで色や向きを変えることができます。

    borderプロパティを上手く使うことで、三角形の形を作ることが可能です。

    お試しください😃

    タイトルとURLをコピーしました