isaraのサイト模写 解説お願いします。

Question

質問

isaraのサイト模写をやっていますが、下記のプログラムでどうして下三角形になるのかがわかりません。解説していただけると有り難いです。

該当のソースコード

.why:after {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    border: 25px solid transparent;
    border-top-color: #ebb94d;
    top: 100%;
    left: 50%;
    margin-left: -25px;
}

補足情報（FW/ツールのバージョンなど）

画像の「実現可能です」の上の下三角形です。

Answer 1

.why:after {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    border: 25px solid transparent;
    border-top-color: #ebb94d;
    top: 100%;
    left: 50%;
    margin-left: -25px;
    border-left-color: pink; /* ADD */
    border-right-color: blue; /* ADD */
    border-bottom-color: green; /* ADD */
}

Comments

[kelt22]

width 0 height 0の要素に対してborderをつけるとtop left right bottomがこのように分かれるのは仕様なのでしょうか？

[kei344]

そうですね。
次は width height に50pxとか値を入れてみてください。

[kelt22]

具体的な値をいれてみたら何が起きていたか理解できました。ありがとうございます。