DWB

コード

2023-09-09

mosya・Awesome

How to create a triangle in CSS?

👤horomi

https://mosya.dev/lessons/speech-bubble/challenge

❓ Prompt

CSSでふきだしを作ろうとしています。

ふきだしの四角の部分がなぜこのコードになるのか理解できません。

.speech-bubble:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50px;
  border: 10px solid transparent;
  border-bottom-color: #506975;
}

💬 Answer

こちらのコードは:before疑似要素を使用して、ふきだしの三角部分を作成するものです。この三角部分を作成するためには、ボーダーの特性を利用したテクニックが使われています。

content: "";
- 空の内容を持つ疑似要素を生成します。これによって、実際の要素の前に何も表示されない「ボックス」が生成されます。
position: absolute;
- 要素を絶対位置指定します。これによって、top, left などのプロパティで位置を調整できます。
top: -20px;
- この要素の上端を親要素の上端から-20pxの位置に配置します。これによって、三角部分がふきだしの外に出るようになります。
left: 50px;
- この要素の左端を親要素の左端から50pxの位置に配置します。これは三角部分の位置を左から50pxのところに配置するためのものです。
border: 10px solid transparent;
- 10pxの太さのボーダーを持ち、その色は透明に設定されています。四方すべてが透明のボーダーを持つことになります。
border-bottom-color: #506975;
- この要素の下部のボーダーの色だけを#506975に変更します。これにより、下部のボーダーだけが指定した色となり、他の3辺は透明のままです。

このテクニックを利用すると、実際に表示されるのは下部のボーダーだけです。そのため、ふきだしの部分に向かっている三角形として見えることになります。

要点としては、borderの特性を利用して四角形の一部だけを表示することで、三角形を作成している、ということです。

❓ Prompt

なぜ三角になるんですか？:beforeは元々どんな形なんですか？
borderをtransparentにして透明にした後border-bottomで色をつけるとなると線になる気がしてなりません。

💬 Answer

まず、:before疑似要素自体は、基本的に「ボックス」として生成されるものです。具体的な形状や大きさは指定しない限り0x0の大きさになります。しかし、borderを使用することでそのボックスに特定の大きさを持たせることができます。

次に、borderの特性に関して説明します。通常、ボーダーは四方の線として考えられるかもしれませんが、実際にはそれぞれのボーダーは四角形の一部として描画されます。これが三角形を作成する際のキーポイントです。

以下のイメージを考えてみてください。

大きな正方形を考えます。
この正方形の上、左、右の3辺を透明にします。
下の辺だけに色をつけます。

この時、下の辺だけが色付きで、他の3辺は透明なので、見た目としては三角形が形成されるように見えます。

実際に、borderを使用してこのような形状を作成する際のポイントは、四方のボーダーがそれぞれ独立した四角形として描画される、ということです。したがって、borderの3辺を透明にし、残る1辺にだけ色をつけることで、三角形を作成することができます。

例のCSSでの設定を見ると:

border: 10px solid transparent;
border-bottom-color: #506975;

この設定により、上・左・右のボーダーは透明になり、下のボーダーだけが#506975の色を持ちます。結果として、下のボーダー部分だけが見えることになり、これが三角形として描画されます。

❓ Prompt

はじめの大きな正方形は色が塗られた状態をイメージするということですか？

上、左、右の３辺を透明にして下だけ色をつけたら、塗る面積が無くなる気がします。なぜ三角形の頂点があるのでしょうか？

💬 Answer

ボーダーを用いて三角形を作成する際のポイントは、ボーダーが実際にどのように描画されるかを理解することです。borderの各辺は、単なる直線ではなく、実は「四角形」として描画されます。ボックスのボーダーを分厚くすると、それは四角形の面として描画されることになります。

例えば、四角形ボックスを考え、そのボーダーの幅を10pxにした場合、ボックスの各辺には、10pxの太さの四角形が追加されます。この時、ボックスの4辺それぞれに、四角形としてのボーダーが存在します。

ここで、上・左・右のボーダーを透明にし、下のボーダーだけに色を付けると、下のボーダーだけが表示されることになります。この時、下のボーダーは四角形の形ではなく、三角形の形として表示されます。

なぜなら、上・左・右のボーダーが透明であるため、下のボーダーの四角形がそれらと合体して、三角形として描画されるからです。

具体的には、下のボーダーの左端と右端は、左ボーダーと右ボーダーと合体することで、三角形の斜辺となります。そして、下のボーダーの下端は、三角形の底辺となります。

❓ Prompt

下のボーダーの両端は左ボーダーと右ボーダーに垂直関係だったのが、透明にすることで角度がかわるということですか？

💬 Answer

はい、正確にはそのように表現するのがより適切です。

ボックスのボーダーを分厚くすると、それぞれのボーダーは実際に四角形の領域として存在します。この四角形の領域の隣接する辺同士（例えば、下のボーダーの左端と左のボーダーの上端）が接触しています。

四方のボーダーがすべて同じ色や太さを持っている場合、これらの辺同士の接触部分は目立たなくなります。しかし、一部のボーダーを透明にすると、接触部分が目立ってきます。

具体的に、上・左・右のボーダーを透明にし、下のボーダーだけに色を付ける場合、下のボーダーの左端と右端は、それぞれ左ボーダーと右ボーダーの領域に接触している部分として表示されます。この接触部分が斜辺として表示され、結果として三角形が形成されるわけです。

このように、ボーダーの特性を理解し、適切に色や太さを調整することで、さまざまな形状やデザインを実現することができます。

❓ Prompt

ボーダーが透明になると四角形の領域に変化が起こるということですか？

💬 Answer

いいえ、ボーダーが透明になることで四角形の領域そのものに変化が生じるわけではありません。しかし、我々がそれを視覚的にどのように解釈するかが変わってきます。

具体的には、ボーダーの領域そのものは四角形として常に存在します。しかし、透明なボーダーは視覚的には「存在しない」と感じられます。そのため、色付きのボーダーの部分だけが目立ち、それが特定の形状として解釈されることになります。

ボーダーを使った三角形のテクニックにおいて、以下の手順で視覚的な三角形が形成されることを考えてみましょう。

まず、全てのボーダーが透明である状態を考えます。この時点では、どのボーダーも視覚的には見えません。
次に、下のボーダーだけに色をつけます。このとき、下のボーダーの四角形が視覚的に目立つようになります。
上・左・右のボーダーは透明のままなので、これらのボーダーは視覚的には「存在しない」と感じられます。
結果として、下のボーダーの四角形が唯一の目立つ領域となり、その両端が斜めにカットされているように見えるため、三角形として解釈されます。

ボーダーの四角形の領域そのものは変化していないのですが、透明と色付きの部分との組み合わせにより、我々はそれを三角形として見る、というのがこのテクニックのポイントです。

❓ Prompt

> 両端が斜めにカットされるように見える
この部分をもう少し詳しく解説してください。

💬 Answer

了解しました。ボーダーを用いた三角形の形成に関して、特に「両端が斜めにカットされるように見える」という点を中心に解説します。

まず、ボックスモデルのボーダーは、実際には四角形の面として描画されることを理解するところから始めます。この四角形の面の形成方法は、ボーダーの太さに依存します。例えば、ボーダーが10pxの場合、それぞれのボーダーは10pxの幅の四角形の面として存在します。

以下のステップで三角形がどのように形成されるかを詳しく見ていきます：

四方のボーダー: まず、ボックスの四方全てに10pxのボーダーを適用したとします。この場合、ボックスの各辺に10pxの幅の四角形が存在します。
透明ボーダー: 上、左、右のボーダーを透明にします。この時点で、これらのボーダーは視覚的には見えませんが、空間としては存在しています。
色付きの下ボーダー: 下のボーダーだけに色を付けます。この下のボーダーの四角形が目立つようになります。
三角形の形成: ここが最も重要な部分です。透明な左ボーダーと下のボーダーが交差するポイント（つまり、左下の角）では、ボーダーの四角形の面が重なり合い、斜めの線として解釈されるように見えます。同様に、右下の角も斜めの線として見えます。この斜めの線が三角形の斜辺として認識されます。

このように、透明なボーダーと色付きのボーダーの交差点で、斜めの線（三角形の斜辺）が形成されることが、このテクニックのキーポイントです。

❓ Prompt

> ボーダーの四角形の面が重なり合い、斜めの線として解釈されるように見えます。

この部分が分かりません。もう少し詳しく教えてください

💬 Answer

ボーダーを使った三角形の生成に関して、このキーコンセプトを理解するために、ボックス自体を透明な容器と考えてみてください。ボーダーはこの容器の周りを取り囲んでいます。

四角形ボーダーの理解: 通常、ボーダーはただの線として考えられがちですが、実際には四角形の「面」として存在します。たとえば、border: 10px solid black;というスタイルがあると、ボックスの各辺には10pxの太さの「四角形の面」として黒のボーダーが存在します。
透明なボーダー: 上、左、右のボーダーを透明にした場合、これらのボーダーは見えなくなりますが、その「面」としての存在感は保持されています。
色を持つ下のボーダー: 下のボーダーだけに色をつけると、これが唯一視覚的に確認できるボーダーとなります。
斜めの線の生成: ここが最も重要な部分です。下の色付きボーダーは四角形の面として存在しますが、左と右の透明ボーダーと交差する部分では、その「四角形の面」の一部として存在します。この交差する部分、つまり下のボーダーの左端と右端は、それぞれ透明な左ボーダーと右ボーダーの「面」と合流しています。その結果、下のボーダーの両端が斜めにカットされているように見えるのです。

要するに、透明なボーダーが存在することで、色を持つボーダーの四角形の面の一部が「隠れている」と感じられるのです。これが「斜めにカットされるように見える」と感じる理由となります。

❓ Prompt

> 斜めにカットされるように見える

この部分は理解できました。ですが、なぜ頂点になるのかが分かりません。

💬 Answer

了解しました。その部分について説明します。

ボックスのボーダーを用いた三角形のテクニックにおいて、ボーダーは実際には四角形の領域として描画されます。したがって、左・右・下のボーダーを考えた場合、それぞれが独立した四角形として存在します。

下のボーダーに色を付けた場合、それは四角形の帯のように見えます。透明な左・右のボーダーは、視覚的に見えないため、その存在を忘れることが容易です。しかし、これらの透明なボーダーは実際には存在し、下のボーダーと隣接しています。

下のボーダーの左端は、左ボーダーの下端と接触しており、下のボーダーの右端は、右ボーダーの下端と接触しています。

透明なボーダーは「存在しない」として認識されるため、下のボーダーの左端と右端は「空中」で終わっているかのように見えます。しかし、これらの端は、実際には透明なボーダーの面と接触しており、この接触点が「頂点」として認識されるのです。

イメージとしては、下のボーダーが「地面」で、透明な左・右のボーダーが「壁」と考えられます。下のボーダーの端が、これらの「壁」に接触しており、この接触点が「頂点」として視覚的に解釈されます。

❓ Prompt

下のボーダーとの接触部分が頂点になることは理解しています。
透明な左ボーダーと右ボーダー交点が頂点になる意味が分かりません。台形になりませんか？？

💬 Answer

申し訳ございません、前回の説明で間違いがありました。おっしゃるとおり、透明な左ボーダーと右ボーダーの交点が頂点になるわけではありません。正確には、透明な左ボーダーの下端と、色付きの下ボーダーの左端が接触する点、そして透明な右ボーダーの下端と、色付きの下ボーダーの右端が接触する点、この2点が三角形の頂点として認識されます。

再度、ボーダーを用いて三角形を生成する際の仕組みを説明いたします。

CSSのボーダーは、ボックスの各辺に四角形の「面」として描画されます。透明なボーダーは視覚的に見えないため、ボックスの内容部分と色付きのボーダー部分のみが目立ちます。

例として、以下のスタイルを持つボックスを考えてみてください。

box-sizing: border-box;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;

この場合、以下のことが起こります：

左ボーダーと右ボーダーは透明で、各々がボックスの左と右の辺に沿って50pxの幅の四角形の面として存在します。
下ボーダーは赤色で、ボックスの下の辺に沿って100pxの高さの四角形の面として存在します。

この状態で、透明な左ボーダーの下端と赤い下ボーダーの左端が接触し、透明な右ボーダーの下端と赤い下ボーダーの右端が接触します。この接触部分が三角形の2つの頂点として形成されるのです。

そして、透明なボーダー部分は背景や他のコンテンツに隠れるため、結果的に下の赤いボーダー部分だけが見えて三角形として認識されるのです。

ご指摘いただきありがとうございます。誤解を招く説明をしてしまい、申し訳ございません。

❓ Prompt

ボーダーの長さはいくつに設定しているのを想定していますか？
左ボーダーに接触させるようにして右ボーダーを設置し、上下ボーダーも同様に配置した形を「四角形の領域」と定義していたんでしょうか？

今まで、四角のboxの四方向に接するようにしてボーダーが置かれているのかと勘違いしていました。

💬 Answer

申し訳ございません、混乱を招く説明になってしまったようです。

まず基本からお伝えします。通常、ボーダーは確かにボックスの四方に接するように配置されます。具体的には、要素のコンテンツボックスの外側にパディングボックス、ボーダーボックス、マージンボックスが順に存在します。

しかし、このボーダーを用いて三角形を生成するテクニックでは、ボーダーの「四角形の面」を強調して理解することが鍵となります。

再度、三角形を形成するための基本的な考え方を整理してみましょう。

まず、ボックス自体の幅と高さを0にして、ボックスのコンテンツ部分を非表示にします。
左、右、下のボーダーに対して、それぞれ幅や高さを設定します。
このとき、左ボーダーと右ボーダーはボックスの中心に向かって尖った四角形のように見えます。
下ボーダーがこの2つのボーダーと接触することで、三角形が完成します。

具体的に、以下のようなコードを考えてみてください。

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}