一文搞懂 CSS 切角与折角效果：从渐变到逼真翻折（附完整代码示例）

原创于 2025-10-31 09:59:05 发布 · 612 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #CSS切角 #CSS折角效果 #CSS渐变教程 #CSS立体标签效果 #CSS特效 #SCSS 折角 mixin

前端视觉与性能技巧集专栏收录该内容

19 篇文章

订阅专栏

在网页设计中，我们经常希望让卡片、便签等元素看起来更立体、更有质感。今天我们就来深入学习一个高级但实用的 CSS 技巧——CSS 切角与折角效果（Folded Corner），并带你从渐变原理到实战优化，一步步实现“逼真的折角便签”视觉效果。

💡 一、什么是切角与折角？

切角（Cut Corner）：指通过CSS渐变在元素的某个角上“切”掉一部分，形成一个斜角。
折角（Folded Corner）：在切角的基础上，加入暗面阴影，让这个角看起来像是“翻折”起来的纸张。

下图展示了我们将要实现的几种效果（从简单到逼真）：

效果	说明
	45° 切角及优化
	30° 切角效果
	实际生活中的折角效果（带阴影、立体感）

🧩 二、核心原理讲解

CSS 实现切角的核心是使用 线性渐变（linear-gradient）。通过透明色与背景色的交替，可以让元素的一部分看起来被“切掉”或“折叠”了。

例如：

background: linear-gradient(-135deg, transparent 2em, #58a 0);

这行代码的意思是：

从 -135° 方向开始渐变；
前 2em 部分是透明；
接下来为背景色 #58a；
于是形成了一个 45° 的斜切角。

🧱 三、完整案例代码讲解

以下是完整的可运行代码（建议复制后直接在浏览器中打开查看效果👇）：

<!DOCTYPE html>
<!--CSS变形,CSS渐变,“切角效果”-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS 切角与折角效果</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html {
            width: 100%;
            height: 100%;

        }
         /* 图一：45°基础切角 */
        #test1 {
            width: 300px;
            height: 200px;
            background: #58a;
            background: linear-gradient(to left bottom,
                    transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0 / 2em 2em,
                linear-gradient(-135deg, transparent 2em, #58a 0);
        }
        /* 图二：调整尺寸匹配 */
        #test2 {
            width: 300px;
            height: 200px;
            margin-top: 20px;
            background: #58a;
            background: linear-gradient(to left bottom,
                    transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0 / 2em 2em,
                linear-gradient(-135deg, transparent 1.5em, #58a 0);
        }
         /* 图三：改为 30° 切角 */
        #test3 {
            width: 300px;
            height: 200px;
            margin-top: 20px;
            background: #58a;
            background: linear-gradient(to left bottom,
                    transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0 / 2em 2em,
                linear-gradient(-150deg,
                    transparent 1.5em, #58a 0);
        }
        /* 图四：通过三角函数调整折角比例 */
        #test4 {
            width: 300px;
            height: 200px;
            margin-top: 20px;
            background: #58a;
            background: linear-gradient(to left bottom,
                    transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0 / 3em 1.73em,
                linear-gradient(-150deg,
                    transparent 1.5em, #58a 0);
        }

        /* 图五：真实折角便签效果 */
         #note {
            margin-top: 10px;
            width: 260px;
            height: 160px;
            padding: 20px 20px 20px 20px;
            position: absolute;
            top: 10px;
            right: 20px;
            background: #58a;
            background:
                linear-gradient(-150deg, transparent 1.5em, #58a 0);
            border-radius: .5em;
        }

        #note::before {

            content: '';
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(to left bottom,
                    transparent 50%, rgba(0, 0, 0, .4)0) 100% 0 no-repeat;
            width: 1.73em;
            height: 3em;
            transform: translateY(-1.3em) rotate(-30deg);
            transform-origin: bottom right;
            border-bottom-left-radius: inherit;
            box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
        }
       
    </style>
</head>

<body>
    <div id="test1">图一：45°折角的解决方案</div>
    <div id="test2">图二：45°折角的解决方案</div>
    <div id="test3">图三：30°切角的解决方案</div>
    <div id="test4">图四：30°切角的解决方案</div>
    <div id="note">图五：实际生活中的30°切角的解决方案</div>
</body>

</html>

🧮 四、数学原理：折角比例的计算

当我们把角度改为 30° 时，折角的高和底边长度不再相等，需要通过三角函数计算：

折角高（h） = size
折角底（b） = size / tan(角度)

例如当角度 = 30°：

b = 2 / √3 ≈ 1.73em

这就是为什么在代码中使用：

background-size: 3em 1.73em;

来控制折角三角形的比例。

🎨 五、实现逼真翻折效果（::before伪元素）

为了让折角更有立体感，我们在右上角叠加一个“阴影三角形”：

#note::before {
  background: linear-gradient(to left bottom,
      transparent 50%, rgba(0, 0, 0, .4) 0);
  transform: translateY(-1.3em) rotate(-30deg);
  box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
}

关键在于：

阴影方向与角度匹配；
transform顺序必须正确（先 translateY 再 rotate）；
使用 transform-origin: bottom right; 来保持旋转中心在折角点。

🧰 六、SCSS 封装示例（让代码更 DRY）

如果你使用 Sass/SCSS，可以将折角封装成一个可复用的 Mixin：

@mixin folded-corner($background, $size, $angle: 30deg) {
  position: relative;
  background: $background;
  background: linear-gradient($angle - 180deg, transparent $size, $background 0);
  border-radius: .5em;

  $x: $size / sin($angle);
  $y: $size / cos($angle);

  &::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0);
    width: $y; height: $x;
    transform: translateY($y - $x) rotate(2 * $angle - 90deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .2);
  }
}

调用方式：

#note1 {
  @include folded-corner(#58a, 2em, 40deg);
}

🚀 七、总结

阶段	关键技术	效果提升
图一–图二	`linear-gradient` + 渐变调整	实现基础切角
图三–图四	角度变化 + 三角函数计算	更自然的切角比例
图五	`::before` + 阴影 + transform	实现逼真翻折