会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

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

CSS(シー・エス・エス)
この記事は約2分で読めます。

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

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をコピーしました