如何在Div顶部左右两角各创建三角形？已实现右上角

嘿，我来帮你搞定这个双三角布局的坑！你遇到的情况大概率是两个三角形的伪元素样式/定位冲突了，导致容器布局乱掉。咱们直接上能正常运行的代码，再一步步拆解关键细节～

完整可运行代码 #

HTML #

<div class="cornerTriangles">
  我是带双三角的容器内容
</div>

CSS #

.cornerTriangles {
  width: 10em;
  height: 6em;
  position: relative;
  /* 可选：加背景和边框方便观察布局 */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 1rem; /* 避免内容被三角挡住 */
}

/* 左上角三角形 */
.cornerTriangles::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* 三角大小可自定义 */
  width: 0;
  height: 0;
  border-top: 20px solid #ff4444; /* 三角填充色 */
  border-right: 20px solid transparent; /* 右侧透明，形成左上方尖角 */
}

/* 右上角三角形 */
.cornerTriangles::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* 和左上角三角保持大小一致，也可单独调整 */
  width: 0;
  height: 0;
  border-top: 20px solid #22aaee; /* 三角填充色，可单独设置 */
  border-left: 20px solid transparent; /* 左侧透明，形成右上方尖角 */
}

关键注意事项（为啥之前的写法会乱？） #

• 容器必须设position: relative：这是伪元素绝对定位的基准，不然三角会相对于整个页面定位，直接跑飞
• 用::before和::after分别承载两个三角：不要复用同一个类或者伪元素，分开后各自独立定位，不会互相干扰
• 伪元素必须加content: ""：这是CSS伪元素显示的必要条件，没加的话三角根本不会出现，还可能导致样式异常
• 边框绘制三角的逻辑：通过把元素宽高设为0，配合透明边框来形成三角形——比如左上角三角只保留顶部边框，右侧设为透明；右上角三角只保留顶部边框，左侧设为透明
• 避免内容被三角遮挡：给容器加padding-top（值大于三角高度），或者调整三角的z-index，确保内部内容正常显示

这样修改后，两个三角会稳稳地固定在容器的左上角和右上角，完全不会打乱容器的原有布局～

内容的提问来源于stack exchange，提问作者Kelsey Abreu