幅80px・高さ40pxのCSS三角形

公式Triangle generatorで得たElement用CSSを、下向きの案内へ配置した自作例です。

この下に説明があります

三角形は装飾です。案内の意味は文字で伝えています。

出力CSS

.element {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 0 40px;
  border-color: #1d4ed8 transparent transparent transparent;
}

下の図形自体にはクリック操作はありません。CSSを変更してブラウザを再読み込みすると、自分のページでも比較できます。

Omatsuri：Vitaly Rtishchev様、MIT。自作HTML・レイアウト：CC0。LICENSE.txtを同梱。