Bagaimana membuat: Ribban CSS

Bagaimana membuat ribban

Langkah pertama - Tambahkan HTML:

Dalam contoh ini, ribban termasuk elemen tombol:

<button class="btn">Tombol untuk sesuatu yang menarik <span class="ribbon">BARU</span></button>

Langkah kedua - Tambahkan CSS:

.btn {
  border: tak ada;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  warna: putih;
  position: relatif;
}
.ribbon {
  lebar: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  kanan: -25px;
  atas: -12px;
  text-align: tengah;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  warna: putih;
}

Coba sendiri

Pengertian contoh:

Dalam contoh ini, CSS digunakan untuk menambahkan efek ribban kepada tombol. Ribban ini dicapai dengan menambahkan elemen span dengan gaya khusus di dalam elemen tombol. Elemen span ini ditempatkan di pojok kanan atas tombol dan dirotasi 20 derajat untuk menciptakan efek ribban. Warna latar dan teks ribban juga diatur berbeda dengan warna tombol untuk meningkatkan efek visual.