右下に三角形のついたボタンデザインをCSSで作る方法

Webデザインを猛勉強中のやまよしです。

今回はタイトルの通り、
右下に三角形のついたなんとなくおしゃれなボタンデザインをCSSで作ってみます。

(このボタンデザインの正式名称をご存知の方、ご教授ください…)

それでは早速いきましょう！

実装方法
ざっくり解説
1. ポイントはborder-left&border-bottomの境界
まとめ

実装方法

実装方法です。おそらくコピペでも動くかと。

HTML

<a class="btn" href="#">お知らせ一覧<span class="triangle"></span></a>

1	<a class="btn" href="#">お知らせ一覧<span class="triangle"></span></a>

CSS

.btn {
  background-color: #732a28;
  display: block;
  height: 58px;
  line-height: 58px;
  position: relative;
  text-align: center;
  width: 220px;
}

.triangle {
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  bottom: 8px;
  right: 8px;
  border-left: 15px solid transparent;
  border-bottom: 15px solid #fff;
}

.btn {

background-color: #732a28;

display: block;

height: 58px;

line-height: 58px;

position: relative;

text-align: center;

width: 220px;

}

.triangle {

display: block;

height: 0;

width: 0;

position: absolute;

bottom: 8px;

right: 8px;

border-left: 15px solid transparent;

border-bottom: 15px solid #fff;

}

こんな感じです。
ボタンの高さや幅、色などはお好みに合わせて調整してください。
マウスカーソルが乗った時のホバーの演出もつけると、なおそれっぽくなるかなと思います。

ざっくり解説

ここからはコードのざっくりとした解説です。

やまよし

僕の理解を深めるために文字起こしをしている感じなので、読み飛ばしてもらってもOKです笑

ポイントはborder-left&border-bottomの境界

右下の三角を表現する

  border-left: 15px solid transparent;
  border-bottom: 15px solid #fff;

1 2	border-left: 15px solid transparent; border-bottom: 15px solid #fff;

この2行ですね。

三角形をCSSで表現するには、borderの境界部分を使います。

こんな感じに境界線が斜めになります。
これはwidthとheightを100pxに設定しています。

これを0pxに設定すると…

こんな感じで、三角形が２つ合わさったみたいになります。
ちなみにborderの太さを変更すると大きさが変わります。

あとはこのborderのどちらかを透明(transparent)にすると…

まさに欲しかったこの形。三角形の完成です。

これをposition:absoluteで浮かせて、ボタンの角に設置すれば完成です。

三角形でborderを使うなんてイマイチ理由がよくわかりませんでしたが、順を追って考えてみると納得できますね。

まとめ

というわけで、なんとなくおしゃれな三角形を利用したボタンデザインでした。

勉強中の身だと、▼だったり●だったり、

勉強中いぬ

こんな図形CSSでできるん?画像にするしかなくない!?

ってなりがちですが、割となんでもできるんですね。

今回はCSSの特性をうまく使ったテクニックだと思って結構感動しました笑

誰かのWebデザインの学習に役立ったら超嬉しいです。お互い頑張りましょう！

・参考にさせていただいたサイト

「なぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた」
https://liginc.co.jp/web/html-css/html/164641

「CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】」
https://yuyauver98.me/css-triangle/