三角形つくーる。画像じゃないよ。CSSだよ。

三角形つくーる。画像じゃないよ。CSSだよ。

こんにちは。TOMMY(トミー)です。

人生で初めてインフルエンザを発症しました。
インフルエンザA型に陽性反応が出てしまったので、今週は出勤停止を命じられています。と言っても、発熱もなく食欲もあり元気なんですけどね!笑
今年のインフルエンザは症状がなくても、発症していることがありますので、みなさまもお気をつけください。

さて、今回のブログは「CSSで三角形を作る方法」についてです。
ウェブサイトでよく見る「▶︎」!リンクを飛ばす時によく見る「▶︎」!

三角形の例

小さいのでウェブサイトを閲覧する時は、そんなに意識したことがないと思いますが、コーデイングの時にやたらと目につきます。
お前、そこにもおるんかーい!みたいな所にいたりします(笑)

まぁ、画像で切り抜いて使用しても問題ないのですが、コーダーとしてはコードで解決したいものです。
ということで、三角形について見ていきましょう!

基本の三角形

CSSで三角形を作る時には「border」プロパティを使用します。
基本の三角形は下記のようになります。

<div class="triangle"></div>

 

.triangle{
width: 0;
height: 0;
border-top: 60px solid #FF6B73;
border-right: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;
}

三角形の作り方

  1. border-topで横に一本線を引きます。
    width: 100px;
    height: 100px;
    border-top: 10px solid #FF6B73;
  2. border-rightで縦に一本線を引きます。
    width: 100px;
    height: 100px;
    border-top: 10px solid #FF6B73;
    border-right: 10px solid #ffd152;
  3. border-bottomで横に一本線を引きます。
    width: 100px;
    height: 100px;
    border-top: 10px solid #FF6B73;
    border-right: 10px solid #ffd152;
    border-bottom: 10px solid #9adb35;
  4. border-leftで縦に一本線を引きます。
    width: 100px;
    height: 100px;
    border-top: 10px solid #FF6B73;
    border-right: 10px solid #ffd152;
    border-bottom: 10px solid #9adb35;
    border-left: 10px solid #4edae1;
  5. widthとheightを「0」にします。
    width: 0;
    height: 0;
    border-top: 10px solid #FF6B73;
    border-right: 10px solid #ffd152;
    border-bottom: 10px solid #9adb35;
    border-left: 10px solid #4edae1;
  6. サイズが小さくなってしまうので、borderのサイズを調整します。
    width: 0;
    height: 0;
    border-top: 60px solid #FF6B73;
    border-right: 60px solid #ffd152;
    border-bottom: 60px solid #9adb35;
    border-left: 60px solid #4edae1;
  7. あとは不要な部分を透明にすれば完成です!
    width: 0;
    height: 0;
    border-top: 60px solid #FF6B73;
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid transparent;
透明の書き方には下記二種類があります
  • transparent
  • rgba(255,255,255,0)

三角形の向きについて

三角形の向きについては、どこを透明にするかで変えることができます。
すぐにコピペで使えるように、三角の向きによってのコードを記載しておきます。

下向き三角 ▼

width: 0;
height: 0;
border-top: 60px solid #FF6B73;
border-right: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;

 

左向き三角 ◀︎

width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid #FFD152;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;

 

上向き三角 ▲

width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #9adb35;
border-left: 60px solid transparent;

 

右向き三角 ▶︎

width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #4edae1;

まとめ

え!実は四角だったんだ!と驚きました!!
三角形の向きについては、ひとつ覚えたら後は応用なので簡単ですね♪♪

また、レスポンシブの時に「PCでは横向き▶︎」「SPでは下向き▼」と三角形の向きが変わることがあります。
その場合は、アニメーションCSSのtransformrotate(90deg);」を指定してあげると良いかもしれません。

アニメーションCSSについては、下記のブログをご参照ください。

参考 CSSアニメーション 〜transform編〜01waveみんなのブログ

ということで、三角形の作り方は理解できましたでしょうか。
今後は理解しながらCSSの三角形を利用していきたいものです。

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)