带有悬停效果的扭曲图像画廊

December 02, 2025

2025年12月02日

Another classic component made easy with modern CSS and the new corner-shape. A gallery of skewed images with a reveal effect on hover using a few lines of code. The skewing adjusts accordingly to the direction of the text. Another direction-aware shape!

另一个经典组件，使用现代 CSS 和新的 corner-shape 变得简单。一个倾斜图像的画廊，使用几行代码在悬停时具有揭示效果。倾斜会根据文本的方向进行调整。另一个支持方向感知的形状！

.gallery { --s: 50px;  display: flex; gap: 10px;}.gallery > img { flex: 1; border-start-start-radius: var(--s) 100%; border-end-end-radius: var(--s) 100%; margin-inline-end: calc(-1*var(--s)); corner-shape: bevel; transition: .3s linear;}.gallery > img:hover { flex: 1.6;}.gallery > img:is(:first-child,:hover),.gallery > img:hover + * { border-start-start-radius: 0 100%;}.gallery > img:is(:last-child,:hover),.gallery > img:has(+ :hover) { border-end-end-radius: 0 100%; margin-inline-end: 0;}

Another implementation using clip-path with better, support but not direction-aware.

另一个使用 clip-path 的实现，支持更好，但不支持方向感知。

• Direction-Aware Arrow Shape using corner-shape Combining corner-shape and logical properties to create direction-aware shapes.. November 25, 2025
• 使用 corner-shape 的方向感知箭头形状 结合 corner-shape 和逻辑属性创建方向感知形状。 2025年11月25日
• Dynamic Tooltip Position with Anchor Positioning IV A tooltip with a stretchy arrow that follows its anchor. November 20, 2025
• 动态工具提示位置与锚点定位 IV 一个带有可伸缩箭头的工具提示，跟随其锚点。 2025年11月20日