cssでつくる三角形、矢印などの画像
webサイトのページ内でよく使用する矢印や三角形などを、画像を読み込むのではなく、cssを利用して設置したい場合もあると思います。
以下のよく使われる画像について、cssでつくる時の記述例などを紹介します。
三角形
三角形ができる仕組み
三角形は下の図にあるように、上下左右の四辺のborderを太くしていくと隣のborderとぶつかる部分が斜めにカットされることを利用してつくります。
See the Pen
poJVwbw by saku (@web-saku)
on CodePen.
上の図のようにしてできた四つの三角形のうち、必要な一つだけを残して、残りの三つを見えなくすることで三角形を一つつくることができます。
また、四つの三角形のうち二つに色をつけたり、borderの幅を変更したりすることを組み合わせていろいろな形をつくることができます。
borderの色には「transparent」を指定することで透明にすることができます。
See the Pen
ExjLXpr by saku (@web-saku)
on CodePen.
三角形の使用例
三角形の形を変えて、正三角形などにしたい時は、borderの太さを調整することで実現できます。
あとはそれぞれの使用状況に応じて、positionの指定などで位置を調整したりすればいろいろなところで使えると思います。
記述例として、正三角形をつくるときと見出しなどで使うときの例を紹介しておきます。
See the Pen
YzXLQBy by saku (@web-saku)
on CodePen.
三角形のジェネレーター
ウェブ上で三角形のcssコードをつくることができるジェネレーターも公開されているので紹介しておきます。
CSS三角形作成ツール：http://apps.eky.hk/css-triangle-generator/ja
矢印
矢印は、上で紹介した三角形と四角形を組み合わせることでつくることができます。
矢印の使用例
矢印単独で使う場合と、ボタンなどでテキストと一緒に使う場合の記述例を紹介します。
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.
吹き出し
吹き出しも矢印と同様、四角形と三角形を組み合わせてつくることができます。
塗り潰さずに枠線だけでつくる吹き出しは、枠線色の三角形と背景色の三角形をずらして重ねることで作っています。
吹き出しの使用例
吹き出しを塗りつぶしでつくる場合と、吹き出しの中を塗りつぶさずに枠線で作る場合の記述例を紹介します。
See the Pen
ZEGodQJ by saku (@web-saku)
on CodePen.
吹き出しのジェネレーター
ウェブ上で吹き出しのcssコードをつくることができるジェネレーターも公開されているので紹介しておきます。
CSS ARROW PLEASE！：http://www.cssarrowplease.com/
ステップ表示
手順などを表現する時に使われることが多いステップの表示もここまで紹介してきた方法と「overflow: hidden;」などを組み合わせることで作成できます。
See the Pen
QWbxWbE by saku (@web-saku)
on CodePen.
以上、CSSを利用して三角形や矢印などの画像を作成する方法について紹介してきました。
参考になりましたら幸いです。
関連記事
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す