چگونه ایجاد کنیم: نوار رنگی CSS

چگونه نوار رنگی ایجاد کنیم

مرحله اول - افزودن HTML:

در این مثال، نوار رنگی به عنصر دکمه تعلق دارد:

<button class="btn">A button for something cool <span class="ribbon">NEW</span></button>

مرحله دوم - افزودن CSS:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

سعی کنید خودتان انجام دهید

توضیح مثال:

در این مثال، CSS برای افزودن یک اثر نوار رنگی به یک دکمه استفاده می‌شود. این نوار رنگی از طریق افزودن یک علامت span با استایل خاص به داخل عنصر دکمه به دست می‌آید. این علامت span در گوشه بالا سمت راست دکمه قرار دارد و 20 درجه چرخانده شده است تا اثر نوار رنگی ایجاد شود. رنگ پس‌زمینه و رنگ متن نوار رنگی نیز به رنگ‌های متفاوتی از دکمه تنظیم شده‌اند تا تأثیر بصری افزایش یابد.