三角形の作り方|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サイト制作

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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