Tạo div hình dạng bất quy tắc (irregular shapes) với CSS3 và HTML5

CSS3 cho phép tạo nhiều hình dạng hình học chỉ bằng một <div> và CSS, không cần hình ảnh hay SVG.

1. Hình chữ nhật (Rectangle)

#shape1 {
  width: 300px;
  height: 150px;
  background: blue;
}

2. Tam giác (Triangle) - dùng border

#shape2 {
  width: 0;
  height: 0;
  border-left: 200px solid transparent;
  border-bottom: 200px solid blue;
}

Kỹ thuật: Element kích thước 0x0, border tạo thành tam giác. Màu border nào mong muốn, border kia transparent.

3. Hình tròn (Circle)

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}

4. Hình elip (Ellipse)

#ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background: green;
}

5. Hình thoi (Rhombus) - transform rotate

#rhombus {
  width: 100px;
  height: 100px;
  background: purple;
  transform: rotate(45deg);
}

6. Hình tam giác cân (Isosceles triangle) - clip-path (hiện đại)

#triangle-clip {
  width: 200px;
  height: 200px;
  background: orange;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

7. Hình dạng phức tạp - clip-path polygon

#star {
  width: 200px;
  height: 200px;
  background: gold;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

clip-path (hỗ trợ tốt trên trình duyệt hiện đại) là công cụ mạnh nhất để tạo hình dạng bất kỳ. Công cụ trực tuyến như Clippy giúp tạo CSS clip-path dễ dàng.