My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

【CSS3】transparent で右向き三角を表現する

f:id:sntkk3:20160411101626j:plain

CSSで右向き三角ボタンを作る

transparentを使って下のボタンを作ってみました

f:id:sntkk3:20170717135833p:plain


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つの三角形が存在するものと考えます。

f:id:sntkk3:20170717150900p:plain

この時、それぞれの三角形はborderで表されているものとします。
この考え方から、
右向き三角形を作るには、左側の三角形のみを残す。
つまりは、それ以外のtop、right、bottomを消す(透明化)する必要があります。
そのため、結果として、以下のようなコードになります。

border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;