CSS3 で作る三角形と矢印
CSS3 で作る三角形と矢印
CSS のみで三角形と矢印の作り方がわかったのでメモ。
三角形と矢印
三角形の場合、width:0;height:0; のときの border が三角になるのでそれを利用する。
矢印の場合、 width, height をもつ border は枠線のようになる。 例えば、boder-top, boder-left では、鍵括弧(「)のような形になるので、 これを transform:ratate(±45deg) で回転させて表現している。