Tạo các hình dạng (Shapes) cơ bản với CSS

CSS có thể tạo nhiều hình học cơ bản không cần hình ảnh: vuông, tròn, tam giác, hình thoi, ngôi sao...

Ví dụ cơ bản (Vuông, Chữ nhật, Tròn)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  div { display: inline-block; margin: 20px; }
  .square { width: 100px; height: 100px; background: rgb(23, 153, 121); border: 3px solid darkblue; }
  .rectangle { width: 200px; height: 100px; background: rgb(255, 232, 21); border: 3px solid rgb(42, 0, 70); }
  .circle { width: 100px; height: 100px; background: rgb(0, 255, 13); border: 3px solid rgb(27, 0, 78); border-radius: 50%; }
</style>
</head>
<body>
<h1>Các hình dạng CSS cơ bản</h1>
<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
</body>
</html>

Hình dạng nâng cao (Chỉ dùng 1 div + pseudo-elements)

Tam giác (Triangle)

.triangle {
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3498db; /* Màu tam giác */
}
.triangle-up { border-bottom: none; border-top: 100px solid #3498db; }
.triangle-left { border-left: none; border-right: 100px solid #3498db; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
.triangle-right { border-right: none; border-left: 100px solid #3498db; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

Hình thoi (Diamond)

.diamond {
  width: 100px; height: 100px;
  background: #e74c3c;
  transform: rotate(45deg);
}
.diamond::before { content: ''; display: block; width: 100%; height: 100%; } /* Fix content */

Ngôi sao 5 cánh (Star)

.star {
  margin: 50px auto; width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 70px solid #f1c40f;
  position: relative;
}
.star::after {
  content: ''; position: absolute; top: -55px; left: -50px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 70px solid #f1c40f;
  transform: rotate(35deg);
}

Trái tim (Heart)

.heart {
  position: relative; width: 100px; height: 90px;
}
.heart::before, .heart::after {
  content: ''; position: absolute;
  width: 50px; height: 80px;
  background: #e74c3c;
  border-radius: 50px 50px 0 0;
}
.heart::before { left: 50px; transform: rotate(-45deg); transform-origin: 0 100%; }
.heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }

Hình hộp thoại (Speech Bubble)

.bubble {
  position: relative; padding: 20px; width: 200px;
  background: #3498db; border-radius: 10px; color: white;
}
.bubble::after {
  content: ''; position: absolute; bottom: -20px; left: 30px;
  border: 10px solid transparent; border-top-color: #3498db;
}

CSS clip-path (Hiện đại, mạnh hơn)

.polygon { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } /* Diamond */
.hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.star-clip { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 33% 35%); }

clip-path cho phép hình dạng phức tạp, responsive, và nội dung bên trong vẫn bình thường (khác border hack).