20 CSS Diagonal Sections
08 / 20

All 20 in 20 CSS Diagonal Sections

  1. 01CSS Diagonal Section with clip-path
  2. 02CSS Skewed Section with Counter-Skewed Content
  3. 03CSS Diagonal Section Divider Between Two Colors
  4. 04CSS Angled Section with Background Image
  5. 05CSS Double Diagonal Section Both Edges
  6. 06CSS Diagonal Hero Section with CTA
  7. 07CSS Angled SaaS Features Grid Section
  8. 08CSS Diagonal Pricing Section Band
  9. 09CSS Angled Testimonial Section Card Stack
  10. 10CSS Diagonal Footer Transition
  11. 11CSS Asymmetric Angled Section
  12. 12CSS Stepped Diagonal Section Stack
  13. 13CSS Diagonal Section with Rounded Edge Angles
  14. 14CSS Diagonal Gradient Overlay Section
  15. 15CSS Angled Stats Counter Section
  16. 16CSS Diagonal Section Overlap & Z-Index Stack
  17. 17CSS Responsive Diagonal Section Mobile Fix
  18. 18CSS Animated Diagonal Section on Scroll
  19. 19CSS Diagonal Section with Parallax Background
  20. 20CSS SVG Diagonal Edge Section Divider
Pure CSSMIT licensed

CSS Diagonal Pricing Section Band

An angled band carrying three pricing cards — and the cards stay perfectly rectangular. That contrast is the design: the container is cut, the commerce is not. A monthly/yearly switch driven by :has() changes every price and note with no script, and the recommended tier is lifted by geometry rather than by another colour.

Live Demo
Try it

Build effects like this from scratch: gradients, clip-paths, masks & blend modes

ZTM · Advanced CSS for Web Design · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="dgs-08">
  <input class="dgs-08__sronly" type="checkbox" id="dgs-08-dark">
  <label class="dgs-08__theme" for="dgs-08-dark">
    <svg class="dgs-08__i dgs-08__i--moon" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.4 8.4 0 0 1 9.7 3.5a8.5 8.5 0 1 0 10.8 10.8Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
    <svg class="dgs-08__i dgs-08__i--sun" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4.1" stroke="currentColor" stroke-width="1.7"/><path d="M12 3.2v2M12 18.8v2M3.2 12h2M18.8 12h2M5.7 5.7l1.4 1.4M16.9 16.9l1.4 1.4M18.3 5.7l-1.4 1.4M7.1 16.9l-1.4 1.4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
    <span class="dgs-08__srtext">Toggle dark theme</span>
  </label>
  <div class="dgs-08__stage">
    <section class="dgs-08__intro" aria-labelledby="dgs-08-a">
      <div class="dgs-08__wrap">
        <p class="dgs-08__eyebrow">Basalt &mdash; managed Postgres</p>
        <h2 class="dgs-08__display" id="dgs-08-a">Pricing that stops at the size you actually run</h2>
        <p class="dgs-08__lede">Storage, compute and backups billed separately, so a small database stays small on the invoice. No per-seat charge, ever.</p>
      </div>
    </section>

    <section class="dgs-08__band" aria-labelledby="dgs-08-b">
      <div class="dgs-08__wrap">
        <header class="dgs-08__head">
          <h2 class="dgs-08__h2" id="dgs-08-b">Three plans, one angled band</h2>
          <fieldset class="dgs-08__cycle">
            <legend class="dgs-08__vh">Billing period</legend>
            <input class="dgs-08__sr" type="radio" name="dgs-08-cycle" id="dgs-08-mo" checked><label for="dgs-08-mo">Monthly</label>
            <input class="dgs-08__sr" type="radio" name="dgs-08-cycle" id="dgs-08-yr"><label for="dgs-08-yr">Annual &minus;18%</label>
          </fieldset>
        </header>

        <ul class="dgs-08__plans">
          <li class="dgs-08__plan">
            <h3>Starter</h3>
            <p class="dgs-08__price"><span class="dgs-08__mo">$29</span><span class="dgs-08__yr">$24</span><em>/mo</em></p>
            <p class="dgs-08__sub">1 vCPU &middot; 10 GB storage &middot; 7-day PITR</p>
            <ul class="dgs-08__feat">
              <li>Daily backups</li><li>Single region</li><li>Community support</li>
            </ul>
            <a class="dgs-08__btn" href="#dgs-08-b">Start free</a>
          </li>
          <li class="dgs-08__plan dgs-08__plan--hero">
            <p class="dgs-08__badge">Most deployed</p>
            <h3>Scale</h3>
            <p class="dgs-08__price"><span class="dgs-08__mo">$149</span><span class="dgs-08__yr">$122</span><em>/mo</em></p>
            <p class="dgs-08__sub">4 vCPU &middot; 200 GB storage &middot; 30-day PITR</p>
            <ul class="dgs-08__feat">
              <li>Read replicas in 3 regions</li><li>Connection pooling</li><li>99.99% SLA</li>
            </ul>
            <a class="dgs-08__btn dgs-08__btn--solid" href="#dgs-08-b">Choose Scale</a>
          </li>
          <li class="dgs-08__plan">
            <h3>Enterprise</h3>
            <p class="dgs-08__price"><span class="dgs-08__mo">$640</span><span class="dgs-08__yr">$525</span><em>/mo</em></p>
            <p class="dgs-08__sub">16 vCPU &middot; 2 TB storage &middot; 90-day PITR</p>
            <ul class="dgs-08__feat">
              <li>Private networking</li><li>Named engineer</li><li>Audit log export</li>
            </ul>
            <a class="dgs-08__btn" href="#dgs-08-b">Talk to sales</a>
          </li>
        </ul>
        <p class="dgs-08__fine"><span class="dgs-08__mo">Billed monthly, cancel any time.</span><span class="dgs-08__yr">Billed annually &mdash; two months on us.</span></p>
      </div>
    </section>

    <section class="dgs-08__after" aria-labelledby="dgs-08-c">
      <div class="dgs-08__wrap">
        <h2 class="dgs-08__h3" id="dgs-08-c">Angle discipline on a pricing band</h2>
        <ul class="dgs-08__notes">
          <li><strong>Cards clear the cut</strong><span>Top padding equals the cut plus the section rhythm.</span></li>
          <li><strong>Focus rings survive</strong><span>Buttons sit far inside the clipped edge.</span></li>
          <li><strong>Prices swap on :has()</strong><span>One radio group, no script.</span></li>
        </ul>
      </div>
    </section>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

.dgs-08 {
  --cut: clamp(2rem, 6vw, 7.5rem);
  --page: #f6f5f2;
  --page2: #ebe9e3;
  --ink: #16150f;
  --muted: #5f5c52;
  --line: #dcd8ce;
  --char: #14150f;
  --char2: #1d1e16;
  --on-char: #f4f3ee;
  --dim: #a3a196;
  --brass: #c9a24a;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  position: relative;
  box-sizing: border-box;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.dgs-08 *,
.dgs-08 *::before,
.dgs-08 *::after {
  box-sizing: border-box;
}

@supports (color: oklch(0.75 0.11 85)) {
  .dgs-08 {
    --page: oklch(0.968 0.006 95);
    --page2: oklch(0.928 0.008 95);
    --ink: oklch(0.19 0.01 95);
    --muted: oklch(0.49 0.012 95);
    --line: oklch(0.872 0.01 95);
    --char: oklch(0.185 0.008 120);
    --char2: oklch(0.235 0.009 120);
    --on-char: oklch(0.958 0.005 95);
    --dim: oklch(0.705 0.01 95);
    --brass: oklch(0.735 0.105 85);
  }
}

.dgs-08__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dgs-08__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dgs-08__stage {
  display: flow-root;
}

.dgs-08__wrap {
  inline-size: min(76rem, 100%);
  margin-inline: auto;
}

.dgs-08__intro {
  padding: clamp(4rem, 9vw, 6.5rem) clamp(1.25rem, 5vw, 4rem) calc(var(--cut) + clamp(2.5rem, 6vw, 4rem));
}

.dgs-08__eyebrow {
  margin: 0 0 .9rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.dgs-08__display {
  margin: 0 0 1rem;
  max-inline-size: 26ch;
  font-size: clamp(2.1rem, 6.4vw, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.dgs-08__lede {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--muted);
  text-wrap: pretty;
}

.dgs-08__band {
  position: relative;
  z-index: 1;
  background: var(--char);
  color: var(--on-char);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  margin-block-start: calc(var(--cut) * -1 - 1px);
  padding: calc(var(--cut) + clamp(3rem, 7vw, 5rem)) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}

.dgs-08__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: end;
  justify-content: space-between;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}

.dgs-08__h2 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

.dgs-08__cycle {
  margin: 0;
  padding: .25rem;
  border: 1px solid rgba(244,243,238,.18);
  border-radius: 999px;
  display: flex;
  gap: .2rem;
}

.dgs-08__cycle label {
  min-block-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding-inline: 1rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--dim);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.dgs-08__cycle label:hover {
  color: var(--on-char);
}

.dgs-08__sr:checked + label {
  background: var(--brass);
  color: #14150f;
}

.dgs-08__sr:focus-visible + label {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.dgs-08__plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: rgba(244,243,238,.16);
  border: 1px solid rgba(244,243,238,.16);
  border-radius: 16px;
  overflow: clip;
}

.dgs-08__plan {
  position: relative;
  display: grid;
  gap: .7rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--char);
}

.dgs-08__plan--hero {
  background: var(--char2);
}

.dgs-08__badge {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}

.dgs-08__plan h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.dgs-08__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.dgs-08__price em {
  font-style: normal;
  font-size: .85rem;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0;
}

.dgs-08__yr {
  display: none;
}

.dgs-08__sub {
  margin: 0;
  font-size: .86rem;
  color: var(--dim);
}

.dgs-08__feat {
  list-style: none;
  margin: .35rem 0 1rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-size: .9rem;
}

.dgs-08__feat li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: rgba(244,243,238,.86);
}

.dgs-08__feat li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: .4rem;
  block-size: .4rem;
  border-radius: 999px;
  background: var(--brass);
}

.dgs-08__btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.9rem;
  padding: .75rem 1.3rem;
  border: 1px solid rgba(244,243,238,.28);
  border-radius: 999px;
  color: var(--on-char);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: background .2s ease, translate .2s cubic-bezier(.2,.8,.3,1);
}

.dgs-08__btn:hover {
  background: rgba(244,243,238,.1);
  translate: 0 -1px;
}

.dgs-08__btn--solid {
  background: var(--brass);
  border-color: var(--brass);
  color: #14150f;
}

.dgs-08__btn--solid:hover {
  background: #d8b25c;
}

.dgs-08__btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.dgs-08__fine {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  color: var(--dim);
}

.dgs-08__after {
  background: var(--page2);
  padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 6rem);
}

.dgs-08__h3 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
}

.dgs-08__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.dgs-08__notes li {
  display: grid;
  gap: .3rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line);
}

.dgs-08__notes strong {
  font-weight: 600;
}

.dgs-08__notes span {
  font-size: .9rem;
  color: var(--muted);
  text-wrap: pretty;
}

.dgs-08:has(#dgs-08-yr:checked) .dgs-08__mo {
  display: none;
}

.dgs-08:has(#dgs-08-yr:checked) .dgs-08__yr {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-08 * {
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .dgs-08__band {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
    border-block-start: 1px solid CanvasText;
  }

  .dgs-08__plans,
    .dgs-08__plan,
    .dgs-08__btn,
    .dgs-08__cycle {
    border: 1px solid CanvasText;
  }

  .dgs-08__sr:checked + label {
    background: Highlight;
    color: HighlightText;
  }
}
/* Standard top-right theme toggle — pure CSS (checkbox + :has()), so demos
   that ship no script stay tagged Pure CSS. Placed on the root rather than
   inside a demo's own control panel so every demo exposes it in one place. */

.dgs-08__sronly,
.dgs-08__srtext {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dgs-08__theme {
  position: absolute;
  inset-block-start: clamp(.85rem, 2.2vw, 1.5rem);
  inset-inline-end: clamp(.85rem, 2.2vw, 1.5rem);
  z-index: 60;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: inherit;
  background: rgba(127,127,127,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: translate .2s ease;
}

.dgs-08__theme:hover {
  translate: 0 -1px;
}

.dgs-08__sronly:focus-visible + .dgs-08__theme {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.dgs-08__i {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.dgs-08__i--sun {
  display: none;
}

.dgs-08:has(#dgs-08-dark:checked) .dgs-08__i--moon {
  display: none;
}

.dgs-08:has(#dgs-08-dark:checked) .dgs-08__i--sun {
  display: block;
}

.dgs-08:has(#dgs-08-dark:checked) {
  --page: #0a0d13;
  --page2: #121722;
  --ink: #edf1f8;
  --muted: #95a0b2;
  --line: #212836;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-08__theme {
    transition: none;
  }
}

@media (forced-colors: active) {
  .dgs-08__theme {
    border-color: CanvasText;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Diagonal Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Diagonal Pricing Section Band
Source: https://codefronts.com/layouts/css-diagonal-sections/css-diagonal-pricing-section-band/

An angled band carrying three pricing cards — and the cards stay perfectly rectangular. That contrast is the design: the container is cut, the commerce is not. A monthly/yearly switch driven by :has() changes every price and note with no script, and the recommended tier is lifted by geometry rather than by another colour.
## HTML
```html
<div class="dgs-08">
  <input class="dgs-08__sronly" type="checkbox" id="dgs-08-dark">
  <label class="dgs-08__theme" for="dgs-08-dark">
    <svg class="dgs-08__i dgs-08__i--moon" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.4 8.4 0 0 1 9.7 3.5a8.5 8.5 0 1 0 10.8 10.8Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
    <svg class="dgs-08__i dgs-08__i--sun" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4.1" stroke="currentColor" stroke-width="1.7"/><path d="M12 3.2v2M12 18.8v2M3.2 12h2M18.8 12h2M5.7 5.7l1.4 1.4M16.9 16.9l1.4 1.4M18.3 5.7l-1.4 1.4M7.1 16.9l-1.4 1.4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
    <span class="dgs-08__srtext">Toggle dark theme</span>
  </label>
  <div class="dgs-08__stage">
    <section class="dgs-08__intro" aria-labelledby="dgs-08-a">
      <div class="dgs-08__wrap">
        <p class="dgs-08__eyebrow">Basalt &mdash; managed Postgres</p>
        <h2 class="dgs-08__display" id="dgs-08-a">Pricing that stops at the size you actually run</h2>
        <p class="dgs-08__lede">Storage, compute and backups billed separately, so a small database stays small on the invoice. No per-seat charge, ever.</p>
      </div>
    </section>

    <section class="dgs-08__band" aria-labelledby="dgs-08-b">
      <div class="dgs-08__wrap">
        <header class="dgs-08__head">
          <h2 class="dgs-08__h2" id="dgs-08-b">Three plans, one angled band</h2>
          <fieldset class="dgs-08__cycle">
            <legend class="dgs-08__vh">Billing period</legend>
            <input class="dgs-08__sr" type="radio" name="dgs-08-cycle" id="dgs-08-mo" checked><label for="dgs-08-mo">Monthly</label>
            <input class="dgs-08__sr" type="radio" name="dgs-08-cycle" id="dgs-08-yr"><label for="dgs-08-yr">Annual &minus;18%</label>
          </fieldset>
        </header>

        <ul class="dgs-08__plans">
          <li class="dgs-08__plan">
            <h3>Starter</h3>
            <p class="dgs-08__price"><span class="dgs-08__mo">$29</span><span class="dgs-08__yr">$24</span><em>/mo</em></p>
            <p class="dgs-08__sub">1 vCPU &middot; 10 GB storage &middot; 7-day PITR</p>
            <ul class="dgs-08__feat">
              <li>Daily backups</li><li>Single region</li><li>Community support</li>
            </ul>
            <a class="dgs-08__btn" href="#dgs-08-b">Start free</a>
          </li>
          <li class="dgs-08__plan dgs-08__plan--hero">
            <p class="dgs-08__badge">Most deployed</p>
            <h3>Scale</h3>
            <p class="dgs-08__price"><span class="dgs-08__mo">$149</span><span class="dgs-08__yr">$122</span><em>/mo</em></p>
            <p class="dgs-08__sub">4 vCPU &middot; 200 GB storage &middot; 30-day PITR</p>
            <ul class="dgs-08__feat">
              <li>Read replicas in 3 regions</li><li>Connection pooling</li><li>99.99% SLA</li>
            </ul>
            <a class="dgs-08__btn dgs-08__btn--solid" href="#dgs-08-b">Choose Scale</a>
          </li>
          <li class="dgs-08__plan">
            <h3>Enterprise</h3>
            <p class="dgs-08__price"><span class="dgs-08__mo">$640</span><span class="dgs-08__yr">$525</span><em>/mo</em></p>
            <p class="dgs-08__sub">16 vCPU &middot; 2 TB storage &middot; 90-day PITR</p>
            <ul class="dgs-08__feat">
              <li>Private networking</li><li>Named engineer</li><li>Audit log export</li>
            </ul>
            <a class="dgs-08__btn" href="#dgs-08-b">Talk to sales</a>
          </li>
        </ul>
        <p class="dgs-08__fine"><span class="dgs-08__mo">Billed monthly, cancel any time.</span><span class="dgs-08__yr">Billed annually &mdash; two months on us.</span></p>
      </div>
    </section>

    <section class="dgs-08__after" aria-labelledby="dgs-08-c">
      <div class="dgs-08__wrap">
        <h2 class="dgs-08__h3" id="dgs-08-c">Angle discipline on a pricing band</h2>
        <ul class="dgs-08__notes">
          <li><strong>Cards clear the cut</strong><span>Top padding equals the cut plus the section rhythm.</span></li>
          <li><strong>Focus rings survive</strong><span>Buttons sit far inside the clipped edge.</span></li>
          <li><strong>Prices swap on :has()</strong><span>One radio group, no script.</span></li>
        </ul>
      </div>
    </section>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

.dgs-08 {
  --cut: clamp(2rem, 6vw, 7.5rem);
  --page: #f6f5f2;
  --page2: #ebe9e3;
  --ink: #16150f;
  --muted: #5f5c52;
  --line: #dcd8ce;
  --char: #14150f;
  --char2: #1d1e16;
  --on-char: #f4f3ee;
  --dim: #a3a196;
  --brass: #c9a24a;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  position: relative;
  box-sizing: border-box;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.dgs-08 *,
.dgs-08 *::before,
.dgs-08 *::after {
  box-sizing: border-box;
}

@supports (color: oklch(0.75 0.11 85)) {
  .dgs-08 {
    --page: oklch(0.968 0.006 95);
    --page2: oklch(0.928 0.008 95);
    --ink: oklch(0.19 0.01 95);
    --muted: oklch(0.49 0.012 95);
    --line: oklch(0.872 0.01 95);
    --char: oklch(0.185 0.008 120);
    --char2: oklch(0.235 0.009 120);
    --on-char: oklch(0.958 0.005 95);
    --dim: oklch(0.705 0.01 95);
    --brass: oklch(0.735 0.105 85);
  }
}

.dgs-08__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dgs-08__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dgs-08__stage {
  display: flow-root;
}

.dgs-08__wrap {
  inline-size: min(76rem, 100%);
  margin-inline: auto;
}

.dgs-08__intro {
  padding: clamp(4rem, 9vw, 6.5rem) clamp(1.25rem, 5vw, 4rem) calc(var(--cut) + clamp(2.5rem, 6vw, 4rem));
}

.dgs-08__eyebrow {
  margin: 0 0 .9rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.dgs-08__display {
  margin: 0 0 1rem;
  max-inline-size: 26ch;
  font-size: clamp(2.1rem, 6.4vw, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.dgs-08__lede {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--muted);
  text-wrap: pretty;
}

.dgs-08__band {
  position: relative;
  z-index: 1;
  background: var(--char);
  color: var(--on-char);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  margin-block-start: calc(var(--cut) * -1 - 1px);
  padding: calc(var(--cut) + clamp(3rem, 7vw, 5rem)) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}

.dgs-08__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: end;
  justify-content: space-between;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}

.dgs-08__h2 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

.dgs-08__cycle {
  margin: 0;
  padding: .25rem;
  border: 1px solid rgba(244,243,238,.18);
  border-radius: 999px;
  display: flex;
  gap: .2rem;
}

.dgs-08__cycle label {
  min-block-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding-inline: 1rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--dim);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.dgs-08__cycle label:hover {
  color: var(--on-char);
}

.dgs-08__sr:checked + label {
  background: var(--brass);
  color: #14150f;
}

.dgs-08__sr:focus-visible + label {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.dgs-08__plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: rgba(244,243,238,.16);
  border: 1px solid rgba(244,243,238,.16);
  border-radius: 16px;
  overflow: clip;
}

.dgs-08__plan {
  position: relative;
  display: grid;
  gap: .7rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--char);
}

.dgs-08__plan--hero {
  background: var(--char2);
}

.dgs-08__badge {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}

.dgs-08__plan h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.dgs-08__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.dgs-08__price em {
  font-style: normal;
  font-size: .85rem;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0;
}

.dgs-08__yr {
  display: none;
}

.dgs-08__sub {
  margin: 0;
  font-size: .86rem;
  color: var(--dim);
}

.dgs-08__feat {
  list-style: none;
  margin: .35rem 0 1rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-size: .9rem;
}

.dgs-08__feat li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: rgba(244,243,238,.86);
}

.dgs-08__feat li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: .4rem;
  block-size: .4rem;
  border-radius: 999px;
  background: var(--brass);
}

.dgs-08__btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.9rem;
  padding: .75rem 1.3rem;
  border: 1px solid rgba(244,243,238,.28);
  border-radius: 999px;
  color: var(--on-char);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: background .2s ease, translate .2s cubic-bezier(.2,.8,.3,1);
}

.dgs-08__btn:hover {
  background: rgba(244,243,238,.1);
  translate: 0 -1px;
}

.dgs-08__btn--solid {
  background: var(--brass);
  border-color: var(--brass);
  color: #14150f;
}

.dgs-08__btn--solid:hover {
  background: #d8b25c;
}

.dgs-08__btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.dgs-08__fine {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  color: var(--dim);
}

.dgs-08__after {
  background: var(--page2);
  padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 6rem);
}

.dgs-08__h3 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
}

.dgs-08__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.dgs-08__notes li {
  display: grid;
  gap: .3rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line);
}

.dgs-08__notes strong {
  font-weight: 600;
}

.dgs-08__notes span {
  font-size: .9rem;
  color: var(--muted);
  text-wrap: pretty;
}

.dgs-08:has(#dgs-08-yr:checked) .dgs-08__mo {
  display: none;
}

.dgs-08:has(#dgs-08-yr:checked) .dgs-08__yr {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-08 * {
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .dgs-08__band {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
    border-block-start: 1px solid CanvasText;
  }

  .dgs-08__plans,
    .dgs-08__plan,
    .dgs-08__btn,
    .dgs-08__cycle {
    border: 1px solid CanvasText;
  }

  .dgs-08__sr:checked + label {
    background: Highlight;
    color: HighlightText;
  }
}
/* Standard top-right theme toggle — pure CSS (checkbox + :has()), so demos
   that ship no script stay tagged Pure CSS. Placed on the root rather than
   inside a demo's own control panel so every demo exposes it in one place. */

.dgs-08__sronly,
.dgs-08__srtext {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dgs-08__theme {
  position: absolute;
  inset-block-start: clamp(.85rem, 2.2vw, 1.5rem);
  inset-inline-end: clamp(.85rem, 2.2vw, 1.5rem);
  z-index: 60;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: inherit;
  background: rgba(127,127,127,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: translate .2s ease;
}

.dgs-08__theme:hover {
  translate: 0 -1px;
}

.dgs-08__sronly:focus-visible + .dgs-08__theme {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.dgs-08__i {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.dgs-08__i--sun {
  display: none;
}

.dgs-08:has(#dgs-08-dark:checked) .dgs-08__i--moon {
  display: none;
}

.dgs-08:has(#dgs-08-dark:checked) .dgs-08__i--sun {
  display: block;
}

.dgs-08:has(#dgs-08-dark:checked) {
  --page: #0a0d13;
  --page2: #121722;
  --ink: #edf1f8;
  --muted: #95a0b2;
  --line: #212836;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-08__theme {
    transition: none;
  }
}

@media (forced-colors: active) {
  .dgs-08__theme {
    border-color: CanvasText;
  }
}
```

How this works

The band is cut; the cards are not. This is worth being explicit about, because the instinct is to angle everything. Angled cards are unreadable — prices, feature lists and buttons all need square edges — so the geometry lives entirely on the section:

.dgs-08__band{
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-block: calc(var(--cut) + 4rem);
}
.dgs-08__card{ border-radius: 18px; }   /* untouched by the clip */

The billing switch is two radios and one selector. Both prices are in the markup; the root reads which radio is checked and swaps which span is shown. Screen readers get a real grouped control, keyboard users get arrow keys, and nothing needs hydrating:

.dgs-08__yr{ display: none; }
.dgs-08:has(#dgs-08-yearly:checked) .dgs-08__mo{ display: none; }
.dgs-08:has(#dgs-08-yearly:checked) .dgs-08__yr{ display: inline; }

Lift the featured tier with margin, not scale. scale(1.04) multiplies the border to 1.04px and softens the text; negative margin-block plus extra padding gives the same hierarchy with pixel-crisp edges — and inside a clipped band, a scaled card is also the one most likely to hit the cut.

Prices need tabular figures. Without tabular-nums, switching 49 to 39 shifts the whole row as the glyph widths change. It is a one-line fix that makes a CSS-only price switch feel engineered.

Make it yours

  • --cut for the angle; keep it under 6vw so the outer cards keep their full height.
  • Add or remove a tier — the grid is repeat(auto-fit, minmax(16rem, 1fr)). Drop the featured offset past four tiers.
  • Change currency and the discount by editing both spans per card; the CSS needs no edits.
  • To wire real billing, read document.querySelector('input[name="dgs-08-cycle"]:checked').value — the switch keeps working without JS in the meantime.
  • For a light band on a dark page, swap the --band and --page tokens; card borders derive from the accent via color-mix() and follow automatically.
  • Angle only the top edge if this section ends the page and a footer follows — that is demo 10's job.

Gotchas — read before shipping

  • Cards near the acute corners are the ones that get clipped. Pad the band by calc(var(--cut) + Nrem) on both block sides, not just the top.
  • Visually hidden radios must remain focusable — use the clip-rect pattern, never display: none, or the billing switch becomes keyboard-inaccessible.
  • Do not put the price switch outside the band and the prices inside if you plan to animate the band; a transform on the section creates a containing block that the outer control's :has() selector still works through, but layout can drift.
  • Card shadows are clipped at the band edge. Use borders inside a clipped section.
  • Announce a price change: the switch is a radio group with a visible label, so the change is perceivable without relying on colour or motion.
  • Don't scale the featured card inside a clipped band — a 1.05 scale can push its corner straight into the diagonal.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by :has(), oklch(), backdrop-filter, text-wrap as this demo is written. The core technique itself goes back further — Chrome 105+.

:has() (Chrome 105 / Safari 15.4 / Firefox 121) drives the billing switch and theme toggle; without it both prices would show, so a three-line JS class toggle is the graceful fallback if you must support older engines. clip-path, grid and tabular-nums work everywhere.

Techniques used in this demo

backdrop-filterMDN ↗clip-pathMDN ↗text-wrap: prettyMDN ↗:has()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →