🎯 Pure CSS Angle Cut Test

Testing global CSS angle cuts (no scoped styles) - Debug Mode

📐 Test 1: Different Aspect Ratios (5° angle)

Using mask-image with linear gradients for true responsiveness

1:1
Square
cut-top-left
4:3
Classic
cut-top-right
16:9
Widescreen
cut-bottom-left
3:2
Photo
cut-bottom-right
21:9
Cinema
combined

📏 Test 2: Different Angles (16:9 aspect ratio)

All elements are 16:9 but with different --angle values

3°
Subtle
5°
Default
8°
Noticeable
12°
Bold
15°
Dramatic

🖼️ Test 3: Real Images with Angle Cuts

Testing how mask-image approach works with actual images

Mountain landscape
cut-top-left
City skyline
cut-top-right
Ocean waves
cut-top-right + cut-bottom-left (8°)

🔧 Test 4: Debug Combined Cuts

Testing individual vs combined cuts to debug the issue

Only cut-top-right
Only cut-bottom-left
Combined (both classes)
Combined (8°)

✨ Pure CSS implementation using mask-image gradients

Truly responsive across all aspect ratios - no predefined buckets needed

Uses mask-image with linear gradients for mathematically consistent angles