如何用CSS实现文件样式的Div效果？

直接上完整实现代码，对应你要的文件折角效果：

HTML结构 #

<div class="file-card">
  <!-- 这里放你的内容 -->
  <h3>文件标题</h3>
  <p>文件内容示例...</p>
</div>

CSS样式 #

.file-card {
  position: relative;
  width: 320px;
  height: 420px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  box-sizing: border-box;
}

/* 生成右上角折角 */
.file-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* 控制折角大小，数值越大折角越大 */
  width: 0;
  height: 0;
  border-bottom: 24px solid #f5f5f5;
  border-left: 24px solid transparent;
  border-radius: 0 0 0 4px;
}

/* 折角阴影，增强立体感 */
.file-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 24px solid rgba(0, 0, 0, 0.05);
  border-left: 24px solid transparent;
  /* 阴影稍微偏移，营造层次感 */
  transform: translate(-1px, 1px);
}

关键说明 #

• 父元素必须设置position: relative，这样伪元素的绝对定位才会基于这个div
• 用边框三角形实现折角：利用透明边框+有色边框组合出三角形形状，比clip-path更兼容
• ::before做折角的主体颜色，::after做折角的阴影，通过轻微偏移模拟立体效果
• 调整border-bottom和border-left的数值可以改变折角大小，修改颜色就能匹配你的设计风格
• 如果担心内容被折角遮挡，给父元素加padding-right: 30px即可（数值比折角大一点）

内容的提问来源于stack exchange，提问作者Ton Vital