CSSで右向き三角ボタンを作る
transparentを使って下のボタンを作ってみました
ECサイトなどに使えそうなボタンです。
備忘録として、ソースを記載します。
[ソース] html
<a href="#" class="see_detail">詳細を見る</a>
[ソース] css
a.see_detail { width: 160px; font-size: 16px; } .see_detail::before { content: ""; /* width: 0; */ /* height: 0; */ border: 10px solid #fff; border-top: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid transparent; /* left: 5px; */ margin-top: 5px; display: inline-block; } .see_detail { font-weight:bold; text-decoration:none; color: #FFF; font-size: 12px; display:block; text-align:center; vertical-align: middle; margin-top: 70px; padding:6px 0 8px; background-color:#01991a; border-radius:6px; float: right; }
[捕捉解説]このしくみについて
以下で使われている「transparent」について
border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
透明を意味する「transparent」という言葉通り、
transparentには、対象を透明化するという機能があります。
今回のような図形の場合、
下図のように、上(top)、下(bottom)、左(left)、右(right) 4つの三角形が存在するものと考えます。
この時、それぞれの三角形はborderで表されているものとします。
この考え方から、
右向き三角形を作るには、左側の三角形のみを残す。
つまりは、それ以外のtop、right、bottomを消す(透明化)する必要があります。
そのため、結果として、以下のようなコードになります。
border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;