こんにちは、DeepBlend45です！
今回はHTMLとCSSの課題でリボン型の装飾を作ったときに、borderの動きが思っていたのと違った！という話をまとめてみます。
背景：リボン型装飾を作る課題
CSSでリボン風のデザインを作る課題が出たときに、以下のような指定がありました。
.ribbon {
width: 100px;
height: 0;
border: 20px solid red;
border-bottom: none;
}
このコードでは border-bottom を削除することで、リボンのような形ができていました。
当時の自分の考え
正直このときは「border って四角い線で囲ってるだけじゃないの？」と思っていました。
だから border-bottom: none; をしたら「下の線が消えて、ただの細長い長方形になるんだろう」と考えてたんです。
実際はどうだったのか？
調べてみて驚いたのが、CSSの border は「四角形の線」ではなく、「三角形や台形」のような図形になるということ！
つまり、height: 0; の状態で border を指定すると、borderの色が三角形（または台形）のように視覚的に表示されるんですね！
なので、border-bottom: none; とすることで、下側の三角（または台形）が取り除かれて、リボンの上の装飾だけが残る、という仕組みだったわけです。
学びと気づき
CSSの見た目って「線」じゃなくて「図形としての面」なんだな、という新しい視点を得ることができました。
borderはただの囲いじゃなくて、形を作る部品でもあるんですね。
まとめ
・border は見た目では 三角形や台形として描画されている
・height: 0; との組み合わせで、borderが図形のように見える
・CSSの表現力の奥深さを感じた
同じように「なんでこうなるの？」と思った方の参考になれば嬉しいです！
また何か面白い気づきがあったら記事にしていきます💻✨