CSS Banners & Alerts 10 / 14

CSS Banner with Diagonal Slash Background

Four diagonal-slash CSS banners in a bold geometric streetwear aesthetic — four distinct slash techniques side-by-side: a <code>transform: skewX(-12deg)</code> badge with red 40% OFF promo, a <code>clip-path: polygon()</code> angled purple fill on a New Feature card, a <code>repeating-linear-gradient</code> hazard-stripe system warning in amber, and a crisp <code>linear-gradient(108deg)</code> dark/yellow split with a live countdown timer (hours / minutes / seconds).

Best forpromo banners, sale announcements, dev-tool warnings, attention-grabbing CTAs.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-dgs" aria-label="Diagonal slash banner demo">
  <span class="section-mark">// Diagonal slash banners</span>

  <div class="banner--promo">
    <div class="slash-badge">
      <div><div class="badge-text">40% OFF</div><div class="badge-sub">Today Only</div></div>
    </div>
    <div class="promo-content">
      <div class="promo-title">Summer Sale — <span>ends midnight</span></div>
      <button class="promo-cta" type="button">Shop Now</button>
    </div>
  </div>

  <div class="banner--new">
    <div class="new-fill" aria-hidden="true"></div>
    <div class="new-left">
      <span class="new-label">New Feature</span>
      <span class="new-divider" aria-hidden="true"></span>
      <div class="new-headline">AI Autocomplete</div>
    </div>
    <div class="new-right">
      <span class="new-desc">Smart code suggestions powered by your team's codebase. Available on all plans from today.</span>
      <button class="new-btn" type="button">Try It →</button>
    </div>
  </div>

  <div class="banner--system">
    <div class="system-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    <div class="system-body">
      <div class="system-title">Scheduled Maintenance Window</div>
      <div class="system-desc">All services will be unavailable Fri 02:00–05:00 UTC. Please save your work before this window begins.</div>
    </div>
    <div class="system-timestamp">FRI · 02:00 UTC</div>
  </div>

  <div class="banner--countdown">
    <div class="countdown-left">
      <span class="countdown-tag">Offer Ends In</span>
      <span class="countdown-title">Limited Launch Pricing</span>
    </div>
    <div class="countdown-right">
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-h>08</div><div class="cd-label">Hrs</div></div>
      <div class="cd-colon">:</div>
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-m>34</div><div class="cd-label">Min</div></div>
      <div class="cd-colon">:</div>
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-s>17</div><div class="cd-label">Sec</div></div>
    </div>
  </div>
</section>
/* ─── 10 Diagonal Slash Banner — bold geometric streetwear ─────── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Rajdhani:wght@500;600;700&display=swap');

.ba-dgs {
  --ba-dgs-bg: #111;

  position: relative;
  width: 100%;
  min-height: 640px;
  background: var(--ba-dgs-bg);
  background-image: repeating-linear-gradient(-55deg, transparent 0px, transparent 18px, rgba(255,255,255,0.018) 18px, rgba(255,255,255,0.018) 19px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 48px 16px;
  font-family: 'Rajdhani', sans-serif;
  box-sizing: border-box;
}
.ba-dgs *, .ba-dgs *::before, .ba-dgs *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-dgs .section-mark { font-family: 'Rajdhani', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.12); align-self: flex-start; max-width: 700px; width: 100%; }

.ba-dgs .banner--promo { width: 100%; max-width: 700px; background: #f5f5f5; display: flex; align-items: stretch; overflow: hidden; height: 80px; position: relative; animation: ba-dgs-slideIn 0.45s ease 0.04s both; }
.ba-dgs .slash-badge { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 1; padding: 0 40px 0 24px; }
.ba-dgs .slash-badge::before { content: ''; position: absolute; inset: 0; background: #e11d48; transform: skewX(-12deg) scaleX(1.05); transform-origin: right; z-index: -1; }
.ba-dgs .badge-text { font-family: 'Anton', sans-serif; font-size: 28px; color: white; letter-spacing: 0.04em; white-space: nowrap; line-height: 1; }
.ba-dgs .badge-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: block; margin-top: 2px; text-align: center; }
.ba-dgs .promo-content { flex: 1; display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.ba-dgs .promo-title { font-family: 'Anton', sans-serif; font-size: 24px; color: #111; letter-spacing: 0.02em; line-height: 1; flex: 1; }
.ba-dgs .promo-title span { color: #e11d48; }
.ba-dgs .promo-cta { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 20px; background: #111; color: white; border: none; cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background 0.2s; white-space: nowrap; }
.ba-dgs .promo-cta:hover { background: #e11d48; }

.ba-dgs .banner--new { width: 100%; max-width: 700px; background: #0d0d0d; position: relative; overflow: hidden; padding: 0; height: 90px; display: flex; align-items: stretch; animation: ba-dgs-slideIn 0.45s ease 0.12s both; }
.ba-dgs .new-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 48%; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); z-index: 0; }
.ba-dgs .new-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 0 0 0 24px; width: 44%; }
.ba-dgs .new-label { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.22em; color: rgba(255,255,255,0.85); white-space: nowrap; }
.ba-dgs .new-divider { width: 2px; height: 40px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.ba-dgs .new-headline { font-family: 'Anton', sans-serif; font-size: 22px; color: white; letter-spacing: 0.04em; line-height: 1; flex: 1; }
.ba-dgs .new-right { flex: 1; display: flex; align-items: center; padding: 0 24px; position: relative; z-index: 1; }
.ba-dgs .new-desc { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.55; max-width: 280px; }
.ba-dgs .new-btn { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.25); cursor: pointer; transition: all 0.2s; white-space: nowrap; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.ba-dgs .new-btn:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

.ba-dgs .banner--system { width: 100%; max-width: 700px; position: relative; overflow: hidden; background: #1a0a00; padding: 18px 24px; display: flex; align-items: center; gap: 20px; animation: ba-dgs-slideIn 0.45s ease 0.20s both; }
.ba-dgs .banner--system::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-52deg, rgba(234,88,12,0.12) 0px, rgba(234,88,12,0.12) 12px, transparent 12px, transparent 28px); pointer-events: none; }
.ba-dgs .system-icon { flex-shrink: 0; width: 44px; height: 44px; background: #ea580c; clip-path: polygon(50% 0%, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; position: relative; z-index: 1; }
.ba-dgs .system-icon svg { width: 16px; height: 16px; color: white; }
.ba-dgs .system-body { flex: 1; position: relative; z-index: 1; }
.ba-dgs .system-title { font-family: 'Anton', sans-serif; font-size: 18px; color: #fb923c; letter-spacing: 0.06em; line-height: 1; margin-bottom: 4px; }
.ba-dgs .system-desc { font-size: 13px; font-weight: 500; color: rgba(251,146,60,0.6); line-height: 1.5; }
.ba-dgs .system-timestamp { font-family: 'Courier New', monospace; font-size: 10px; color: rgba(234,88,12,0.5); letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1; }

.ba-dgs .banner--countdown { width: 100%; max-width: 700px; background: linear-gradient(108deg, #0f172a 0%, #0f172a 52%, #facc15 52%, #fef08a 100%); height: 76px; display: flex; align-items: center; overflow: hidden; position: relative; animation: ba-dgs-slideIn 0.45s ease 0.28s both; }
.ba-dgs .countdown-left { flex: 1; padding: 0 0 0 28px; display: flex; align-items: center; gap: 14px; }
.ba-dgs .countdown-tag { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.25em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.ba-dgs .countdown-title { font-family: 'Anton', sans-serif; font-size: 22px; color: white; letter-spacing: 0.04em; line-height: 1; }
.ba-dgs .countdown-right { width: 48%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 28px; }
.ba-dgs .cd-unit { text-align: center; }
.ba-dgs .cd-num { font-family: 'Anton', sans-serif; font-size: 32px; color: #0f172a; line-height: 1; letter-spacing: -0.01em; }
.ba-dgs .cd-label { font-size: 8px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,23,42,0.5); margin-top: 1px; }
.ba-dgs .cd-colon { font-family: 'Anton', sans-serif; font-size: 28px; color: rgba(15,23,42,0.35); line-height: 1; margin-top: -6px; }

@keyframes ba-dgs-slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ba-dgs > div { animation: none; } }
(() => {
  const root = document.querySelector('.ba-dgs');
  if (!root) return;
  const h = root.querySelector('[data-ba-dgs-h]');
  const m = root.querySelector('[data-ba-dgs-m]');
  const s = root.querySelector('[data-ba-dgs-s]');
  if (!h || !m || !s) return;
  const end = Date.now() + 8 * 3600000 + 34 * 60000 + 17000;
  const pad = (n) => String(n).padStart(2, '0');
  function tick() {
    const diff = Math.max(0, end - Date.now());
    h.textContent = pad(Math.floor(diff / 3600000));
    m.textContent = pad(Math.floor((diff % 3600000) / 60000));
    s.textContent = pad(Math.floor((diff % 60000) / 1000));
  }
  tick();
  const id = setInterval(tick, 1000);
  root._baDgsTimer = id;
})();

More from CSS Banners & Alerts

Material Design Floating Alert CardCSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Gradient Animated Border AlertSemantic Bootstrap-style Alerts CSSInline Form Validation Alert CSSCSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS Alert
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →