三角矢印 arrow

三角矢印の実装方法

こちらでご紹介する作り方は、borderを基本とし、塗りつぶしはafterまたはbeforeで、線はその両方の擬似要素を使って三角の矢印を作ります。

上

左

下

右

上

左

下

右

イメージ	CSS	説明
	border-width:20px 20px 20px 20px; border-style:solid; border-color:#d00 #0d0 #00d #dd0; width:50px; height:50px;	borderとwidthとheightをそれぞれ設定します。
	border-width:20px 20px 20px 20px; border-style:solid; border-color:#d00 #0d0 #00d #dd0; width:0; height:0;	widthとheightを0にし、borderのみの状態にします。
	border-width:0 20px 20px 20px; border-style:solid; border-color:#d00 #0d0 #00d #dd0; width:0; height:0;	矢印とする部分と対面する幅を0にします。
	border-width:0 20px 20px 20px; border-style:solid; border-color:transparent transparent #00d transparent; width:0; height:0;	矢印とする部分でない残りの2つの色を透明にします。

以下のCSSソースで上向きの三角矢印が形成されます。

向きを変える場合は上記のソースから、border-widthで大きさの場所とborder-colorでの塗りつぶし方法、topやleftなどでの位置を変更することで変更が可能です。

線での三角矢印を作る場合は、塗りつぶしで使ったbeforeと同じものをafterで作り、線の太さ分位置をずらします。