CSSのborderプロパティを使用して三角形、矢印などの図形を作成する方法
webサイトのページ内でよく使用する矢印や三角形などの図形を、画像を読み込むのではなく、CSSを利用して設置したい場合もあると思います。
今回は下記のよく使われる図形について、CSSのborderプロパティを使って作成する時の記述例などを紹介します。
三角形
三角形ができる仕組み
はじめにCSSのborderプロパティでどのようにして三角形ができるのか、その仕組みについて簡単に紹介しておきます。
下の例にある三つの図形は左から順番に上下左右の四辺のborderの幅を太くしていったものです。
三角形は下の図にあるように、上下左右のborderを太くしていくと隣のborderとぶつかる部分が斜めにカットされることを利用して作成することができます。
See the Pen
poJVwbw by saku (@web-saku)
on CodePen.
上の図のようにしてできた四つの三角形のうち、必要な一つだけを残して、残りの三つを見えなくすることで一つの三角形を作成することができます。
また、四つの三角形のうち二つに色をつけたり、borderの幅を変更したりすることを組み合わせていろいろな形をつくることができます。
また、borderの色には「transparent」を指定することで透明にすることができるので、必要ない部分のborderはこれを利用して見えないようにします。
See the Pen
ExjLXpr by saku (@web-saku)
on CodePen.
三角形の使用例
三角形の形を変えて、正三角形などにしたい時は、borderの太さを調整することで実現できます。
あとはそれぞれの使用状況に応じて、positionの指定などで位置を調整したりすればいろいろなところで使えると思います。
記述例として、正三角形をつくるときと見出しなどで使うときの例を紹介しておきます。
See the Pen
YzXLQBy by saku (@web-saku)
on CodePen.
三角形のCSSコードジェネレーター
ブラウザ上でborderプロパティを使った三角形のCSSコードを生成することができるジェネレーターも公開されているので紹介しておきます。
・CSS Triangle Generator – CSS Portal
https://www.cssportal.com/css-triangle-generator/
矢印
矢印は、上で紹介したborderプロパティを使った三角形と四角形とを組み合わせることで作成することができます。
矢印の使用例
矢印単独で使う場合と、ボタンなどでテキストと一緒に使う場合の記述例を紹介します。
See the Pen
KKpRZRJ by saku (@web-saku)
on CodePen.
大なり記号、チェックマーク
矢印と同じような意味で使われることもある「大なり記号」は四角形の四辺のうち、隣り合った二辺だけborderを作って回転させることで作成することができます。
See the Pen
mdJLYrK by saku (@web-saku)
on CodePen.
大なり記号、チェックマークの使用例
ページトップへ戻るなどのボタンに使用する場合とチェックマークとして使用する場合の記述例を紹介します。
大なり記号のそれぞれの辺の長さ、borderの太さ、回転角度を調整することでチェックマークとしても利用できます。
See the Pen
XWbqwgN by saku (@web-saku)
on CodePen.
吹き出し
吹き出しも矢印と同様、四角形とborderプロパティを使った三角形とを組み合わせて作成することができます。
塗りつぶされずに枠線だけでできている吹き出しは、枠線色の三角形と背景色の三角形をずらして重ねることで作っています。
吹き出しの使用例
吹き出しを塗りつぶしでつくる場合と、吹き出しの中を塗りつぶさずに枠線で作る場合の記述例を紹介します。
See the Pen
ZEGodQJ by saku (@web-saku)
on CodePen.
吹き出しのジェネレーター
ブラウザ上でborderプロパティを使った吹き出しのCSSコードを生成することができるジェネレーターも公開されているので紹介しておきます。
・CSS Arrow Please – By Simon Hoejberg – @shojberg
http://www.cssarrowplease.com/
ステップ表示
手順などを表現する時に使われることが多いステップの表示もここまで紹介してきた方法と「overflow: hidden;」などを組み合わせることで作成することができます。
See the Pen
QWbxWbE by saku (@web-saku)
on CodePen.
まとめ
以上、CSSのborderプロパティを利用して三角形や矢印などの画像を作成する方法について紹介してきました。
参考になりましたら幸いです。
関連記事
CSSのclip-pathプロパティを使って三角形などの図形を作る方法
webサイトのページ内でよく使用する矢印や三角形などの図形を、画像を読み込むのではなく、CSSを利用して設置したい場合もあると思います。よく使われそうな図形である三角形、矢印、大なり記号、チェックマーク、吹き出し、ステップ表示をCSSのclip-pathプロパティを利用して作成する時の記述例などを紹介します。
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
This site uses Akismet to reduce spam. Learn how your comment data is processed.
コメントを残す