Using CSS corner-shape For Folded Corners
本文介绍了一种使用CSS corner-shape属性实现元素折叠角效果的技术方案，作为对传统clip-path方法的替代。作者首先回顾了基于clip-path的折角实现，然后详细阐述了如何利用border-radius配合corner-shape: bevel来创建折痕。核心步骤包括：定义表示折角坐标的CSS变量，通过border-top-right-radius和corner-top-right-shape: bevel在元素右上角创建折线；利用::before伪元素生成“翻折面”，并通过绝对定位将其放置到正确位置；使用overflow: clip处理溢出。为提升真实感，文章进一步引入了容器样式查询，根据x和y坐标值动态计算border-bottom-left-radius，从而模拟出符合透视的折痕与阴影效果。最终实现了一个仅通过两个坐标变量即可控制的可复用工具。文章最后对比了corner-shape方案与clip-path方案，指出corner-shape方案代码更简洁，但目前缺乏Safari和Firefox的支持。