Làm nghiêng div theo trục X (skewX) với CSS

Giới thiệu

Hàm skewX(angle) làm nghiêng phần tử theo trục X (trục ngang), tạo hiệu ứng hình bình hành ngang. Các đường dọc vẫn song song, đường ngang bị nghiêng.

Cú pháp

transform: skewX(<angle>);

Ví dụ: skewX(20deg)

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 300px;
      height: 100px;
      background-color: #e8f4fd;
      border: 1px solid #3498db;
      margin-bottom: 20px;
      font-family: system-ui, sans-serif;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    
    #skewDiv {
      -ms-transform: skewX(20deg);       /* IE 9 */
      -webkit-transform: skewX(20deg);   /* Safari cũ */
      transform: skewX(20deg);           /* Chuẩn */
      background-color: #ffeaa7;
      border-color: #f39c12;
    }
  </style>
</head>
<body>
  <div class="box">Bình thường (không skew)</div>
  <div class="box" id="skewDiv">skewX(20deg) - Nghiêng theo trục X</div>
</body>
</html>

Hình dung skewX

Bình thường:                          skewX(20deg):

┌─────────────────────┐              ┌─────────────────────┐
│                     │             ╱                     ╱
│   Nội dung          │            ╱   Nội dung           ╱
│                     │           ╱   (cũng bị nghiêng)   ╱
└─────────────────────┘          ╱─────────────────────╱
                                 
Đường dọc: thẳng đứng              Đường dọc: VẪN song song
Đường ngang: song song             Đường ngang: NGHIÊNG 20°

Kết hợp skewX + skewY

/* Tương đương nhau về mặt hình học */
transform: skewX(10deg) skewY(20deg);
transform: skew(10deg, 20deg);  /* skew(x, y) - gọn hơn */

/* Lưu ý: Thứ tự transform quan trọng cho matrix, nhưng skewX/skewY giao hoán được */

Ứng dụng thực tế

• Section divider nghiêng: Tách 2 section bằng đường chéo
• Button/badge dynamic: Hover skewX nhẹ tạo cảm giác chuyển động
• Hero shape: Background hero section nghiêng
• Card perspective: Kết hợp perspective + skewX cho hiệu ứng 3D giả
• Text effect: Container skewX, text counter-skewX để text thẳng

Kỹ thuật: Background nghiêng, Text thẳng (Chi tiết)

<style>
  .hero-skewed {
    position: relative;
    padding: 4rem 0;
    overflow: hidden;
  }
  .hero-skewed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: skewY(-6deg);  /* hoặc skewX */
    transform-origin: top left;
    z-index: -1;
  }
  .hero-skewed .container {
    /* Text/content bình thường */
  }
</style>

<section class="hero-skewed">
  <div class="container">
    <h1>Tiêu đề thẳng đứng</h1>
    <p>Nội dung bình thường, không bị nghiêng</p>
  </div>
</section>

Lưu ý

• Góc dương: Nghiêng theo chiều kim đồng hồ (trái lên, phải xuống)
• Góc âm: Nghiêng ngược chiều kim đồng hồ
• Nội dung con cũng bị skew — dùng pseudo-element cho background nếu muốn content thẳng
• Có thể gây horizontal overflow — parent cần overflow-x: hidden