by ryou

cssのみで流れを示すリスト作成

CSSのみで三角形を作ることが出来ることは、知識として知ってはいたのですが、使い道が今まで無かったので実際に使ったことはありませんでした。

ただ、先日インターネットの大海を徘徊していた所、以下のような制作の流れのデザイン

ホームページ制作の流れ / ホームページ制作 東京[グリッドネス] / WEB制作

を発見し、デザインが好みだったのと、「これCSSのみで作れるのでは?」と思ったので実際に作ってみました。

動作サンプル

GitHub Pages

解説

CSSのみで三角形を作る方法

下記サイトですごくわかりやすくまとめられていました。

CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる

概要

table要素の1列目に背景に色を付けた四角形と上記サイトの方法で作成した三角形を縦並べにしているだけです。

デザインに関して

参考にしたWEB制作サイト様では制作の流れにしようされていましたが、フロー形式のリストが必要なデザインであれば色々な所で使えそうです。デザインはまだほとんど出来ないのでこういうストックを貯めて行きたいですね。