CSSで作る丸・三角の作り方｜初心者向けにわかりやすく解説

はじめに

「丸いボタンを作りたい」「矢印をCSSだけで作りたい」
そんなとき 画像を使わずに図形だけを作れる方法 を知っていると、とても便利です。

この記事では、初心者でもすぐ使える 丸・三角のCSS基本テクニック をまとめて紹介します。

1. CSSで「丸」を作る方法（border-radius）

border-radius を 50% にすると、四角形を丸にできます。

基本コード

<div class="circle"></div>

.circle {
  width: 120px;
  height: 120px;
  background: #4087BF;
  border-radius: 50%;
}

ポイント

• width と height を同じ値にすると真円
• 色変更も簡単
• ボタン・アイコン背景に便利

2. CSSで「三角」を作る方法（border を利用）

CSSの三角形は 透明なボーダーを利用する仕組み で作られます。

下向き三角形

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

.triangle-down {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #4087BF;
}

上向き・左右向きの三角

方向は “どのボーダーに色を付けるか” で変わります。

/* 上向き */
.triangle-up {
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #4087BF;
}

/* 左向き */
.triangle-left {
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right: 40px solid #4087BF;
}

/* 右向き */
.triangle-right {
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #4087BF;
}

3. 少し応用：吹き出し・矢印に応用可能

三角形は 吹き出しのしっぽ や メニューの矢印 などにも応用できます。

吹き出し例

.balloon {
  background: #FAF7F5;
  padding: 16px;
  border-radius: 8px;
  position: relative;
}

.balloon::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 20px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #FAF7F5;
}

4. 画像を使わない図形のメリット

• 表示が速い（軽量）
• CSSで色・サイズを自由に変更できる
• スマホ対応も簡単
• 劣化しない（拡大してもキレイ）

シンプルな図形は CSS で作るのが最も効率的です。

まとめ

CSSだけで図形が作れるようになると、デザインの幅が一気に広がります。
ぜひあなたのWeb制作にも活かしてみてください！