Eric A. Meyer on Nostr: A #CSS thing I did today: ``` --inset: transparent 0.67rem, black 0.5rem; mask: ...
A #CSS thing I did today:
```
--inset: transparent 0.67rem, black 0.5rem;
mask:
linear-gradient(45deg, var(--inset)),
linear-gradient(135deg, var(--inset)),
linear-gradient(225deg, var(--inset)),
linear-gradient(315deg, var(--inset))
;
mask-composite: intersect;
```
*(Note: does not play particularly well with borders, outlines, or drop shadows.)*
The reason I did this instead of `clip-path` is to angle-snip the corners off elements of any size or aspect ratio. A small thing, but I like it.
```
--inset: transparent 0.67rem, black 0.5rem;
mask:
linear-gradient(45deg, var(--inset)),
linear-gradient(135deg, var(--inset)),
linear-gradient(225deg, var(--inset)),
linear-gradient(315deg, var(--inset))
;
mask-composite: intersect;
```
*(Note: does not play particularly well with borders, outlines, or drop shadows.)*
The reason I did this instead of `clip-path` is to angle-snip the corners off elements of any size or aspect ratio. A small thing, but I like it.