Help us understand the problem. What is going on with this article?

cssだけで画像を使わずに三角形を描画する

cssだけで画像を使わずに三角形を描画する方法について。
軽くググるとおそらくborderを使って実現する方法がヒットするはず。

そのまま使えば目的達成の場合がほとんどでしょうが、パッと見ただけじゃどうしてあれで三角形になるのか謎ですよね。

そこで、どんな原理で三角形を描画しているのかをご紹介します。
理屈がわかればデザインの微調整だってできるはず!

See the Pen triangle by ririli (@ririli) on CodePen.

サンプルは上か順を追って説明していきます。

まずはfirstクラス

border-topを引いただけです。
当然ですがただの棒ですね。

次にsecondクラス

border-rightをたしてみました。
勘が良い人はここで気づくかも?

続いてthirdクラス

borderを太くしてみました。
おや、 topとrightのborderが重なる箇所が斜めになってますね...

核心に近づくfourthクラス

leftとbottomもたして正方形に。
三角形の面影が見えてきましたね。

ついに三角形登場のfifthクラス

widthとheightを0にしてborderだけで全てが構成されるようにしました。
fourthクラスにあった真ん中の空間がなくなったことで斜めの線同士がくっついて見事三角形が出現しました。

いらないものは消したsixthクラス

今回は下向きの三角形だけ残したかったのでright, left, bottomのborderを透明に変更しました。
当然上むきにしたければbottomだけを残して残りを透明にします。

まとめ

以上がcssだけで三角形を描画する仕組みでした。
わかってしまえば単純。
原理がわかっていれば二等辺三角形にしてみたり、直角の位置を変えてみたり、夢無限大。

ririli
Podcastやってます。 https://wakateossan.github.io/ 若手とおっさんの年齢差をコンセプトにテック系や健康、時事ネタなどを話しています。
https://www.ririli.net/
Colorkrew
東京・秋葉原にあるIT企業、株式会社Colorkrew。 ”世界のシゴトをたのしくするビジョナリーカンパニー”をビジョンに掲げています。 管理職0(ゼロ)、階層0(ナシ)、 チーム力∞(無限大)の組織運営、バリフラットモデルを策定・導入。OpenWork(旧Vorkers)が選ぶ自由主義で個性を活かす企業、性格のいい会社に上位ランクイン!
https://www.colorkrew.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした