三角形の作り方|CSS

三角形の作り方|CSS
この記事は約3分で読めます。

CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。
三角形を作るうえで必要になってくるプロパティが「border」だ。
これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。

borderで三角形?

borderで三角形を作るには、borderで四角を作る時の角が斜めになからそれを利用して三角形を作っています。
一片以外は、すべて非表示(transparent)にすることで三角形っぽく見せているのです。
なんだか文字ではうまく伝えられないので、アニメーションでborderの上→右→下→左と表示してみます。

See the Pen
CSSで三角形
by endebataro (@endebataro)
on CodePen.

上向きの三角形

上のアニメーションを参考に上向きの三角形を作ります。

【CSS】
  .sankaku {
    border-right: 100px solid transparent;
    border-bottom: 100px solid #137a5b;
    border-left: 100px solid transparent;
    box-sizing: border-box
  }
【Demo】

See the Pen
CSSで上向き三角形
by endebataro (@endebataro)
on CodePen.

下向きの三角形

【CSS】
  .sankaku {
    border-top: 100px solid #1dfcb9;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
  }
【Demo】

See the Pen
CSSで下向き三角形
by endebataro (@endebataro)
on CodePen.

右向きの三角形

【CSS】
  .sankaku {
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid #87ffdb;
  }
【Demo】

See the Pen
CSSで右向き三角形
by endebataro (@endebataro)
on CodePen.

左向きの三角形

【CSS】
  .sankaku {
    border-top: 100px solid transparent;
    border-right: 100px solid #17c18e;
    border-bottom: 100px solid transparent;
  }
【Demo】

See the Pen
CSSで左向き三角形
by endebataro (@endebataro)
on CodePen.

まとめ

いかがだったでしょうか?
↑この「いかがだったでしょうか?」って、いろんなキュレーションサイトで見るたびに可笑しくなってしまいます。
いかがもなにも。。。。ねぇ。

いつか自分のブログでも言ってみたいと思っていた言葉でした。

CSSサイト制作

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

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