Chapter 2: CSS Styling

[amir0ff]

Visual Improvement: Refine CSS for .shape triangle in Next.js Learn Course

There appears to be a minor visual proportion issue with the CSS-created triangle shape used in the CSS Modules section of the Next.js Learn Course.
The current shape, created using a border-based technique, looks slightly squat. Adjusting the left and right border widths will create a more balanced and visually pleasing arrow shape.

---

1. Current CSS (Issue)

The triangle appears too wide relative to its height, making it look visually unbalanced.

File: /app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent; /* Current width */
  border-right: 20px solid transparent; /* Current width */
}

Visual: (Current wide triangle)

---

2. Suggested CSS (Fix)

By reducing the side borders to 18px, the triangle becomes taller and sharper, resulting in a more balanced and effective arrow-like proportion.

Suggested Fix:

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}

Visual: (Suggested balanced triangle)

---

Rationale for the fix: Reducing the side borders from 20px to 18px makes the triangle taller and sharper in appearance, giving it a more balanced and visually effective arrow-like proportion suitable for an icon/logo element.