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

IT

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

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

↑こういうやつですね

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

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

スポンサーリンク

実装方法

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

HTML

CSS

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

ざっくり解説

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

やまよし
やまよし

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

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

右下の三角を表現する

この2行ですね。



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

border-topとborder-rightの境界

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



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

width&heightが0px

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



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

border-rightを透明にした

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

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



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

まとめ

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

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

勉強中いぬ
勉強中いぬ

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


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

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

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



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

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

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

コメント

タイトルとURLをコピーしました