# CSS Tab Shape - Skill Reference

> Tab shapes with concave "feet" or a slanted folder edge, cut with CSS only: `clip-path: shape()` or a `mask` of radial gradients, driven by one `--r` radius variable. No script runs after mount.

## What this teaches

- `clip-path: shape()` with `arc`, `vline`, `hline`, `curve` and `line` commands, every number tied to one `--r` custom property
- The folder tab: a slanted right edge drawn with a `curve` + `line` + `curve` sequence, so the tab leans into its neighbour
- Inward (concave) corners at the tab's feet with `arc ... of` without `cw`, so the shape hugs the strip it sits on
- CSS `mask` with three layers (`padding-box` fill + two radial-gradient corner cut-outs) to carve a border away
- Overlapping tabs with a negative `margin-left` on `.tab + .tab` (folder stack)
- Per-tab fills through custom properties (`--tab-bg`, `--tab-color`), so any CSS background, gradients included, works

## Core concept

A tab is a rectangle with its top corners rounded and its bottom corners flared outward. A flare cannot be made with `border-radius`, so the shape is cut after layout: either by tracing the outline with `clip-path: shape()`, or by growing a border the size of the radius and masking it away. Both leave the box model alone (padding and size stay what you set) except the mask, whose border adds `--r` on each side. Because every coordinate is a `calc()` of `--r`, one slider scales the whole shape.

## Use it

### Embed (no build step)

```html
<script src="https://vanilla-motion.com/embed/css-tab-shape/1.0.0/css-tab-shape.js"></script>

<!-- The script mounts on every [data-css-tab-shape]. Give the element a height: the tabs sit centred in it. -->
<div
  data-css-tab-shape
  data-technique="folder"
  data-radius="8"
  data-padding-x="24"
  data-hover-highlight="false"
  style="height: 200px"
>
  <!-- child [data-tab] elements become the tabs: text = label, data-background / data-color optional -->
  <div data-tab data-background="linear-gradient(to bottom right, #60A5FA, #22C55E)">Tab 1</div>
  <div data-tab data-background="#F87171">Lorem ipsum</div>
  <div data-tab data-color="#FFFFFF" data-background="#1E3A8A">Dolor sit amet</div>
</div>
```

- Every key of `defaults` is a kebab-case `data-*` attribute: `data-technique`, `data-radius`, `data-padding-x`, `data-padding-y`, `data-gap`, `data-overlap`, `data-tab-color`, `data-active-color`, `data-text-color`, `data-track-color`, `data-bg-color`, `data-hover-highlight`.
- Values convert by the type of the default: numbers via `Number`, booleans are `false` only for `"false"` or `"0"`, everything else stays a string.
- Tabs come from child `[data-tab]` elements, not from an attribute. Without any, three tabs "Tab 1", "Tab 2", "Tab 3" show. The children are replaced on mount and put back on `dispose()`.
- `data-background` accepts any CSS `background` value; `data-color` sets that tab's text colour.

### Bundled apps

```ts
import { mount, defaults } from "@vanilla-motion/css-tab-shape"; // the effect workspace package

const container = document.querySelector<HTMLElement>("#tabs")!; // give it a height; tabs are centred in it

// options = any params (below) plus tabs: { label, background?, color? }[]
const fx = mount(container, {
  technique: "clip-path",
  radius: 12,
  hoverHighlight: true,
  tabs: [{ label: "Tab 1" }, { label: "Tab 2", background: "linear-gradient(#60A5FA, #22C55E)", color: "#fff" }],
});

fx.setParams({ radius: 20, tabColor: "#FACC15" }); // partial update, rewrites CSS custom properties only
fx.dispose();                                      // removes the markup, restores the container's original children
```

`mount` returns a `CssTabShapeHandle` with exactly `setParams(next: Partial<CssTabShapeParams>)` and `dispose()`. The tabs cannot change through `setParams`; call `dispose()` and `mount()` again. The `<style>` tag (`#vmts-style`) is injected once and stays after `dispose()`.

### Params

| Key | Default | Range / options | Meaning |
| --- | --- | --- | --- |
| `technique` | `"folder"` | `"folder"`, `"clip-path"`, `"mask"` | How the outline is cut |
| `radius` | `8` | 2 to 32 (px) | Corner radius; the folder slant scales with it |
| `paddingX` | `24` | 0 to 64 (px) | Space left and right of the label |
| `paddingY` | `8` | 0 to 32 (px) | Space above and below the label |
| `gap` | `0` | 0 to 24 (px) | Space between tabs |
| `overlap` | `0` | 0 to 32 (px) | How far each tab slides under the one before it |
| `tabColor` | `"#60A5FA"` | `#RRGGBB` | Fill of every tab |
| `hoverHighlight` | `false` | boolean | Tabs turn transparent; only the first and the hovered one fill with `activeColor` |
| `activeColor` | `"#67E8F9"` | `#RRGGBB` | Fill of the first/hovered tab when `hoverHighlight` is on |
| `textColor` | `"#18181B"` | `#RRGGBB` | Label colour |
| `trackColor` | `"#FFFFFF"` | `#RRGGBB` | Strip behind the tabs |
| `bgColor` | `"#FFFFFF"` | `#RRGGBB` | Page colour around the strip |

## Key code

### HTML structure

```html
<!-- the class builds this inside the container; tabs sit in one flex row -->
<div class="vmts" data-technique="folder">   <!-- data-technique picks the clip/mask rule; data-hover enables the hover state -->
  <div class="vmts-tabs">
    <div class="vmts-tab" style="--tab-bg: #1E3A8A; --tab-color: #fff"> <!-- per-tab overrides, optional -->
      <span>Tab 1</span>
    </div>
    <div class="vmts-tab"><span>Tab 2</span></div>
  </div>
</div>
```

### CSS - folder (clip-path: shape(), slanted edge)

```css
.tab {
  --r: 8px;
  /* extra right padding = the slanted edge eats 2r of width, so the label stays clear of it */
  padding: 8px calc(24px + 2 * var(--r)) 8px 24px;

  clip-path: shape(
    from 0 100%,                                              /* start bottom-left, no foot flare here */
    vline to var(--r),                                        /* straight up the left side */
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw,       /* top-left rounded corner (cw = clockwise = convex) */
    hline to calc(100% - 4 * var(--r)),                       /* along the top, stopping before the slant */
    curve to calc(100% - 2.75 * var(--r)) calc(0.625 * var(--r))
          with calc(100% - 3 * var(--r)) 0px,                 /* top-right: ease from flat into the slope */
    line to calc(100% - var(--r)) calc(100% - 0.5 * var(--r)),/* the slanted edge going down-right */
    curve to 100% 100% with calc(100% - 0.75 * var(--r)) 100%,/* bottom-right: ease out of the slope into the baseline */
    line to 100% 100%,
    close
  );
}

/* overlap: pull each tab under its left neighbour so the slants nest like folder tabs */
.tab + .tab { margin-left: -12px; }
```

### CSS - clip-path: shape() (flared feet)

```css
.tab {
  --r: 12px;
  /* the clip adds nothing to the box: padding and width stay exactly what you set */
  clip-path: shape(
    from 0 100%,                                           /* start at the bottom-left corner */
    arc by var(--r) calc(-1 * var(--r)) of var(--r),       /* no cw = counter-clockwise: concave foot curling up and in */
    vline to var(--r),                                     /* up the left side */
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw,    /* top-left convex corner */
    hline to calc(100% - 2 * var(--r)),                    /* across the top */
    arc by var(--r) var(--r) of var(--r) cw,               /* top-right convex corner */
    vline to calc(100% - var(--r)),                        /* down the right side */
    arc by var(--r) var(--r) of var(--r),                  /* bottom-right concave foot, then close back to start */
    close
  );
}
```

### CSS - mask (border cut away)

```css
.tab {
  --r: 12px;
  --bg: #60A5FA;
  border: var(--r) solid var(--bg);          /* the border is the material that becomes the feet */
  border-bottom: 0;
  border-radius: calc(var(--r) * 2) calc(var(--r) * 2) 0 0; /* 2r outer radius: the border adds r, so the corner reads as r */

  mask:
    linear-gradient(#000) padding-box,       /* layer 1: keep everything inside the padding box */
    radial-gradient(100% 100% at 0 0, #0000 98%, #000) 0 100% / var(--r) var(--r),     /* layer 2: bottom-left r x r tile, transparent circle = concave foot */
    radial-gradient(100% 100% at 100% 0, #0000 98%, #000) 100% 100% / var(--r) var(--r); /* layer 3: mirrored for bottom-right */
  mask-repeat: no-repeat;                    /* one tile per corner, never repeated */
}
```

### JS - mount and live update

```ts
// all the JS there is: write params as custom properties, the CSS does the drawing
function apply(root: HTMLElement, P: Params) {
  root.dataset.technique = P.technique;           // switches the clip-path/mask rule
  if (P.hoverHighlight) root.dataset.hover = "";  // attribute presence toggles the hover state in CSS
  else delete root.dataset.hover;
  root.style.setProperty("--vmts-r", `${P.radius}px`); // one radius drives every coordinate
  root.style.setProperty("--vmts-overlap", `${P.overlap}px`);
}

// per-tab fill: custom property, so gradients work and the hover rule can still override --bg
tab.style.setProperty("--tab-bg", "linear-gradient(to bottom right, #60A5FA, #22C55E)");
```

```css
/* hover state: all tabs transparent, the first (while the strip is not hovered) or the hovered one filled */
.vmts[data-hover] .vmts-tab { --bg: transparent; }
.vmts[data-hover] .vmts-tabs:not(:hover) .vmts-tab:first-child,
.vmts[data-hover] .vmts-tabs:hover .vmts-tab:hover { --bg: var(--vmts-active); }
```

## Variants

### Folder, gradient fills (default)
`technique: "folder"` with a per-tab `background` gradient. `clip-path: shape()` draws a rounded top-left corner and a slanted right edge; right padding grows by `2 * var(--r)` to make room. Gradients work because the fill is a plain `background`.

### Folder tabs, stacked (folder-stack)
Same folder shape, `overlap: 12` and solid dark fills with white text. A negative `margin-left` (`calc(-1 * var(--vmts-overlap))`) slides each tab under the previous one's slant; later tabs paint on top in DOM order.

### clip-path: shape() (clip-path)
`technique: "clip-path"` with `radius: 12`, `paddingX: 32`, `gap: 4` and `hoverHighlight: true`. Concave feet come from `arc` without `cw` at the two bottom corners. The clip does not change the box model, so padding stays exact. The strip is tinted (`trackColor`) so the feet read against it.

### CSS mask (mask)
`technique: "mask"` with two tabs, `radius: 12`, tight padding and `hoverHighlight: true`. A border of `--r` is added, then three mask layers cut the bottom corners away. The border widens the box by `2 * --r` horizontally, which is the box-model cost `shape()` avoids.

## Adapt to your layout

- **Radius**: change `--r` (or `radius`); every coordinate in all three techniques is a multiple of it. The folder slant uses 4r, 3r, 2.75r, r and 0.75r offsets, so keep those ratios if you edit it.
- **Slant depth**: the folder tab's right padding is `px + 2r`; change the `4 * var(--r)` in `hline` and the right padding together or the label collides with the slant.
- **Stacking**: `overlap` (negative `margin-left` on `.tab + .tab`) works for folder; keep it under the slant width (about 3r) or the tab covers its neighbour's label.
- **Fills**: pass any CSS background through `--tab-bg` per tab; with `hoverHighlight` on, `--bg` is overridden, so per-tab fills are replaced by `transparent`/`activeColor`.
- **Selector names**: `.vmts`, `.vmts-tab` are the effect's own prefixed classes; in your own CSS rename `.tab` freely.
- **Mask vs clip-path**: choose `mask` when you need broad support today; choose `shape()` when the box model must stay exact or the outline is not a simple corner cut.

## Browser support

`clip-path: shape()` (Chromium 135+, Safari 18.4+, Firefox 142+) for `folder` and `clip-path` · CSS `mask` with multiple layers and `radial-gradient` (all modern browsers) for `mask` · Without `shape()` support the tab shows as a plain rectangle; feature-detect with `CSS.supports('clip-path', 'shape(from 0 0, close)')` and fall back to `technique: "mask"`.

## Accessibility

```ts
// tabs here are decorative shapes: plain divs, no roles, no keyboard handling
// if they act as a real tablist, add semantics in your own markup
container.setAttribute("role", "tablist");
tab.setAttribute("role", "tab");
tab.tabIndex = 0;
tab.setAttribute("aria-selected", String(isActive));
```

```css
/* the only motion is a 0.3s background-color fade on hover; drop it for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vmts-tab { transition: none; }
}
```

The hover highlight is mouse-only; mirror it on `:focus-visible` if the tabs are interactive. Keep label text against the fill at 4.5:1 contrast.