border-widthの考え方

Question

<h1>見出し</h1>

h1 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

h1:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

border-widthとborder-colorがなぜこのように指定しているのかわかりません。よろしくお願いします。

回答ありがとうございます。質問の仕方を間違えました。

ショートハンドで書かれていることと、borderの境目が斜めになっていることで三角ができていることはわかります。しかしなぜこのように指定したら、あのような三角になるのかわかりません。よろしくお願いします。

Comments

[maisumakun]

実際の出力結果と照らし合わせた上で、もう少し質問を具体的にしていただけないでしょうか（現状では、「このような出力を作りたかったからこのような指定をしている」ぐらいのざっくりした回答も成立してしまいます）。

https://jsfiddle.net/drqz36ng/

[dit.]

border-widthを` 0 0 15px 15px`以外の数値にしたり、border-colorを全然違う色に変えたりして挙動を確認してみてください。どこの指定がどのような働きをしているか確かめ、それでもわからないところがあればそれを追記してください。
参考になるかもしれないURL置いておきます。
https://www.granfairs.com/blog/staff/make-triangle-with-css

Answer 1

border-width: 0 0 15px 15px; の数値は 上 右 下 左 の線の幅を設定しています。
つまり、下記と同じ意味になります。

border-top-width: 0;
border-right-width: 0;
border-bottom-width: 15px;
border-left-width: 15px;

border-color: #fff #fff #a8d4ff; の数値は 上 左右 下 の線の色を設定しています。
つまり、下記と同じ意味になります。

border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #a8d4ff;
border-left-color: #fff;

これにより左上の三角の折り返し（ドッグイヤー）部分が表現されています。

Answer 2

とりいそぎ..

/* border-width: 上の太さ 右の太さ 下の太さ 左の太さ; */
border-width: 0 0 15px 15px;

以下の2つの記述は同じ意味です。

/* border-color: 上の色 右の色 下の色 左の色; */
border-color: #fff #fff #a8d4ff #fff;

/* border-color: 上の色 左右の色 下の色; */
border-color: #fff #fff #a8d4ff;

4つ記述よりも3つの記述のほうが短いので好き、という人向けの記述です。