note.parts-tips.com

このコンテンツの右下に表示される「ページ上部へ戻る」ボタンでも表示している三角形は、CSSで実装しています。
以下はそのサンプルコードです。

<!-- HTML記述 -->

<div class="triangle"></div>


/* CSS記述 */

.triangle {

  background-color: #000;

  width: 40px;

  height: calc(tan(60deg) * 40px / 2);

  clip-path: polygon(50% 0, 100% 100%, 0 100%); /* 上向き */

  clip-path: polygon(0 0, 100% 50%, 0 100%); /* 右向き */

  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 下向き */

  clip-path: polygon(0 50%, 100% 0, 100% 100%); /* 左向き */

}



.triangle { /* 正三角形 */

  background-color: #000;

  width: 40px;

  height: calc(40px / 2 * tan(60deg));

  clip-path: polygon(50% 0, 100% 100%, 0 100%);

}


三角形のサイズ調整は40pxの部分を変更します。heightはcalc()に式を入れて、自動算出します（三角関数を使用します）
三角形の形は、clip-pathを使用します。このプロパティは対象の要素を指定した形でクリッピングします。三角形の場合はpolygon()（多角形）を使用し、三角形を定義します。

数値を変えたりすると三角形ではなくなりますが、それはそれで様々な形が生まれておもしろいので、いろいろ試してみてください。

以下は参考情報です。



HTTML/CSS

_admim_