Cách tạo: CSS băng rôn

Cách tạo băng rôn

Bước 1 - Thêm HTML:

Trong ví dụ này, băng rôn thuộc về phần tử button:

<button class="btn">Một nút cho điều gì đó thú vị <span class="ribbon">MỚI</span></button>

Bước 2 - Thêm CSS:

.btn {
  biên: không;
  radius cạnh: 5px;
  keo dán: 12px 20px;
  cỡ chữ: 16px;
  con trỏ: chỉ thủng;
  màu nền: #282A35;
  màu: trắng;
  vị trí: tương đối;
}
.ribbon {
  rộng: 60px;
  cỡ chữ: 14px;
  keo dán: 4px;
  vị trí: tuyệt đối;
  right: -25px;
  top: -12px;
  canh chỉnh văn bản: giữa;
  radius cạnh: 25px;
  transform: quay(20deg);
  màu nền: #ff9800;
  màu: trắng;
}

Thử ngay lập tức

Giải thích ví dụ:

Trong ví dụ này, CSS được sử dụng để thêm hiệu ứng băng rôn cho một nút. Hiệu ứng băng rôn được thực hiện bằng cách thêm một phần tử span có phong cách đặc biệt trong phần tử nút. Phần tử span này được định vị ở góc trên bên phải của nút và được quay 20 độ để tạo hiệu ứng băng rôn. Màu nền và màu văn bản của băng rôn cũng được thiết lập khác với màu của nút để tăng cường hiệu ứng thị giác.