如何使用CSS创建折角效果？求助实现指定CSS样式

嘿，我来帮你搞定CSS折角效果！这是个挺实用的UI小技巧，我给你分享两种最常用的实现方式，你可以根据你的目标样式灵活调整：

方法一：伪元素+线性渐变（兼容性好，适合基础折角） #

这种方法用元素的伪元素（:before/:after）配合线性渐变来模拟折角，几乎所有现代浏览器都支持，非常稳妥。

举个右上角小折角的例子：

<div class="corner-fold">我是带折角的盒子</div>

.corner-fold {
  position: relative;
  width: 300px;
  padding: 2rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

.corner-fold::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 控制折角大小，这里是20px的折角 */
  width: 20px;
  height: 20px;
  /* 用渐变画出折角的斜边，颜色要和页面背景匹配 */
  background: linear-gradient(135deg, transparent 50%, #fff 50%, #fff 100%);
  /* 可选：给折角加个阴影，更真实 */
  box-shadow: -2px 2px 2px rgba(0,0,0,0.1);
}

调整技巧： #

• 要做左下角/左上角/右下角的折角？只需要修改top/right/bottom/left定位，以及渐变的角度（比如45deg对应左下角）。
• 想要更大的折角？直接把width和height改成你需要的数值就行。
• 折角颜色要和盒子背景区分开？把渐变里的#fff换成你需要的颜色。

方法二：clip-path（精准控制，适合复杂折角） #

如果你的目标折角形状比较特殊，用clip-path可以更精准地裁切出折角效果，不过要注意它的兼容性（IE不支持，但现代浏览器都没问题）。

还是右上角折角的例子：

.corner-fold-clip {
  width: 300px;
  padding: 2rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
  /* clip-path的参数可以灵活调整坐标点来改变折角形状 */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

调整技巧： #

• calc(100% - 20px)和20px就是控制折角的大小，把这两个数值改成你需要的尺寸即可。
• 要改折角位置？调整polygon里的坐标点就行，比如左下角折角可以写成polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px))。

额外提示 #

如果你的目标样式里折角有“翻起”的层次感，可以给伪元素加个轻微的旋转或者阴影，让效果更逼真。比如给方法一的伪元素加个transform: rotate(1deg);，质感会更好～

如果你的目标样式有更细节的要求（比如折角带边框、渐变颜色），可以随时调整上面的代码参数，或者告诉我具体的样式细节，我再帮你优化！

内容的提问来源于stack exchange，提问作者Zain Ul Abideen