htmlで三角形を作る場合、方法として
・画像を使用する
・CSSで表現する
・SVGで表現する
・Canvasで表現する・・・etc.
などがあるかと思いますが、今回は、CSSでの表現について、記載していきたいと思います。

border-bottom: 0px;
としているのは、コーディングした際に、不要なマージンが出たりするのを防ぐためです。

---

また、:before, :afterなどの擬似要素に設定することで、見出しなどに応用することができます。

と、このような形で、box-shadowと組み合わせることで、影がついてるようにすることもできます。
ただし、borderで設定している三角形には、影をつけることができないので、２枚重ねて、位置をずらすことで影があるように見せているだけなので、ぼかしなどがついたものは、できません。。。