Divider Angled

Fetch pattern JSON: curl https://webspire.de/patterns/divider/angled.json

angled.html

<!-- Angled section divider: uses CSS border trick for diagonal transition -->
<div class="ws-divider relative">
  <div class="bg-[var(--ws-color-surface)] py-20 text-center text-white">
    <h2 class="text-3xl font-bold">Dark Section</h2>
  </div>
  <div class="relative h-16 bg-[var(--ws-color-surface)]">
    <div class="absolute inset-x-0 -top-16 h-16 overflow-hidden">
      <div class="h-0 w-0 border-b-[4rem] border-l-[100vw] border-b-white border-l-transparent"></div><!-- ws-ok -->
    </div>
  </div>
  <div class="bg-[var(--ws-color-surface)] py-20 text-center">
    <h2 class="text-3xl font-bold text-slate-900">Light Section</h2>
  </div>
</div>

Details

Family

divider

Tier

enhanced

Kind

section

Extends

divider/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Experimental Draft

dividerangleddiagonalsectiontransitionslantseparator

Slots

Name	Required	Description
divider	Yes	The angled divider element using CSS borders.