はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

CSS3 で作る三角形と矢印

CSS3 で作る三角形と矢印

CSS のみで三角形と矢印の作り方がわかったのでメモ。

三角形と矢印

三角形の場合、width:0;height:0; のときの border が三角になるのでそれを利用する。

矢印の場合、 width, height をもつ border は枠線のようになる。 例えば、boder-top, boder-left では、鍵括弧(「)のような形になるので、 これを transform:ratate(±45deg) で回転させて表現している。

codepen.io