HTMLとCSSのメモ（コピペ用）
HOMEに戻る

CSSで三角形をつくる

CSS

CSSで簡単な三角形を作るコード。

下向きの三角形CSS（border）

HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000; /* 三角形の色 例：黒 */
}

上向きの三角形CSS（border）

HTML
<div class="triangle-up"></div>
CSS
.triangle-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #000; /* 三角形の色 例：黒 */
}

下向きの三角形（背景グラデーション）

HTML
<div class="triangle-gradient-down"></div>
CSS
.triangle-gradient-down {
  width: 200px;
  height: 100px;
  background: linear-gradient(to bottom, #ccc, #000); /* 上→下のグラデーション */
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%); /* 下向きの三角形 */
}

clip-path: polygon(…) で下向きの三角形を作成している。

50% 100% → 下中央（先端）
0% 0% → 左上
100% 0% → 右上

linear-gradient(to bottom, red, blue) で上から下へのグラデーションに。