三角形の作り方|CSS

三角形の作り方|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.

まとめ

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

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

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

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

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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