v149 · CSS
Compatibility Lab
Probes shape() for clip-path and shape-outside with CSS.supports(), runs live shape injection to confirm rendering, and shows the fallback hierarchy: shape() → polygon() → path().
CSS.supports() probes
Live rendering test
Each card applies the shape via DOM injection and checks the computed style to confirm it rendered.
Fallback hierarchy
/* Fallback chain: shape() → polygon() → none */
/* Best: shape() — curves, arcs, %-responsive */
@supports (clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%)) {
.card {
clip-path: shape(
from 0% 0%,
line to 100% 0%,
curve to 50% 100% via 25% 80%,
close
);
}
}
/* Fallback: polygon() — only straight lines, %-responsive */
@supports not (clip-path: shape(from 0% 0%, line to 100% 0%)) {
@supports (clip-path: polygon(0% 0%, 100% 0%, 50% 100%)) {
.card {
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
}
/* Last resort: path() — pixel-based SVG path, not responsive */
@supports not (clip-path: polygon(0% 0%, 100% 0%)) {
.card {
clip-path: path('M 0 0 L 100 0 L 50 80 Z');
}
}
/* JavaScript feature detection */
const SUPPORTS_SHAPE =
CSS.supports('clip-path', 'shape(from 0% 0%, line to 100% 0%, close)');
const SUPPORTS_POLYGON =
CSS.supports('clip-path', 'polygon(0% 0%)');
const SUPPORTS_PATH =
CSS.supports('clip-path', 'path("M0 0")');
console.log({ SUPPORTS_SHAPE, SUPPORTS_POLYGON, SUPPORTS_PATH });