リンクなどのちょっとしたワンポイントに三角形や矢印などを配置することがあると思います。
画像でもいいのですが、CSSで描画するのも簡単で良い感じです。

一番メジャーなのは、borderで描画する方法です。幅・高さ無しの要素にborderを付けるとこんな感じになります。

分かりやすいので、色分けしました。

  width: 0;
  height: 0;
  border-left: #e88 50px solid;
  border-top: #8e8 50px solid;
  border-right: #88e 50px solid;
  border-bottom: #e8e 50px solid;

で、表示させたい部分だけ残して、他をtransparentにします。
今回は右向きの三角形にしますので、border-rightは不要となります。

  width: 0;
  height: 0;
  border-left: #e88 50px solid;
  border-top: transparent 50px solid;
  border-bottom: transparent 50px solid;

borderの幅を均一にしているので直角二等辺三角形ですが、幅を変えれば、角度も変化します。

  width: 0;
  height: 0;
  border-left: #e88 50px solid;
  border-top: transparent 20px solid;
  border-bottom: transparent 20px solid;

簡単ですね。

これを::beforeや::afterでやれば、HTMLを汚さずにちょっとしたワンポイントを配置できます。

とか、簡単に作れます。

同じように、台形も作れます。
若干取り回しはしづらくなるかもしれませんが、要素に幅・高さを加えてやればOKです。

このとき、bootstrap等を使用しているとbox-sizingがborder-boxになっているので、明示的にcontent-boxを指定しないと意図した表示になりません。

box-sizing: content-box;
width: 30px;
height: 30px;
border-left: #e88 30px solid;
border-top: #8e8 30px solid;
border-right: #88e 30px solid;
border-bottom: #e8e 30px solid;

組み合わせれば、こんなふうにできます。

まあ、使いどころがいつあるかは別として、とりあえず何かおもしろいですね。

工夫次第でいろいろと出来ると思います。