# CSS Tab Shape

> Create tab shapes using CSS mask and clip-path: shape() techniques

Live: https://vanilla-motion.com/css-tab-shape/ · Tuning app: https://vanilla-motion.com/css-tab-shape/app/ · Code reference: https://vanilla-motion.com/css-tab-shape/skill.md · Params: https://vanilla-motion.com/css-tab-shape/params.json

Create tab shapes using CSS mask and `clip-path: shape()` techniques.

## Tab UI with CSS mask

> ▶ [Live demo](https://vanilla-motion.com/css-tab-shape/embed/mask/) · [open in the tuning app](https://vanilla-motion.com/css-tab-shape/app/)

1. Apply normal paddings
2. Create a border around the tab, as we will mask out everything from this border outward.
```css
.tab {
  @apply bg-blue-400 px-3 py-1;

  --r: 12px;
  @apply rounded-t-(--r);

  border: var(--r) solid red;
  border-bottom: 0;
}
```
3. Use mask with 3 layers to cut out the `red` border
```css
.tab {
  /*...*/
  
  mask: linear-gradient(#000) padding-box,
  radial-gradient(100% 100% at 0 0, #0000 98%, #000) 0 100% / var(--r) var(--r),
  radial-gradient(100% 100% at 100% 0, #0000 98%, #000) 100% 100% / var(--r) var(--r);
  mask-repeat: no-repeat;
}
```
4. Finish with hover status

## Clip path shape()
This approach using `clip-path: shape()`, a modern function of clip path. This solve the box model issue of using mask.

> ▶ [Live demo](https://vanilla-motion.com/css-tab-shape/embed/clip-path/) · [open in the tuning app](https://vanilla-motion.com/css-tab-shape/app/)

```css
.tab {
  @apply bg-transparent px-8 py-2 text-center;
  transition: background-color .3s ease;

  --r: 12px;

  clip-path: shape(
    from 0 100%, /*1. start from bottom left corner*/
    arc by var(--r) calc(-1 * var(--r)) of var(--r), /*2. create an arc then draw a vertical line up*/
    vline to var(--r),
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw, /*3. top left rounded corner*/
    hline to calc(100% - 2 * var(--r)), /*4. draw a horizontal line to the next corner*/
    arc by var(--r) var(--r) of var(--r) cw, /*5. top right rounded corner*/
    vline to calc(100% - var(--r)), /*6. vertical line down*/
    arc by var(--r) var(--r) of var(--r), /*7. bottom right inward radius and close*/
    close
  );
}
```
## Tabs with folder shape

> ▶ [Live demo](https://vanilla-motion.com/css-tab-shape/embed/folder-stack/) · [open in the tuning app](https://vanilla-motion.com/css-tab-shape/app/)

```css
.tab {
  @apply pl-6 pr-10 py-2 text-center;
  --r: 8px;

  clip-path: shape(
    from 0 100%,
    vline to var(--r),
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw, /*top left rounded corner*/ 
    hline to calc(100% - 4 * var(--r)),
    curve to calc(100% - 22px) 5px with calc(100% - 24px) 0px, /*top right rounded corner*/
    line to calc(100% - 8px) calc(100% - 4px),
    curve to 100% 100% with calc(100% - 6px) 100%, /*!*bottom right rounded corner*/
    line to 100% 100%,
    close
  );
}
```