如何在div角落绘制三角形？需支持百分比单位而非px

嘿，我刚好有个完美的解决方案给你！用CSS就能轻松实现纯百分比控制的角落三角形，完全不需要依赖px单位，而且适配性拉满，不管你的div尺寸怎么变都能保持效果。

方法一：线性渐变（Linear Gradient）推荐 #

这是最灵活的方案，能精准用百分比控制三角形大小，还能保证直角形状稳定。

实现右上角三角形的示例代码： #

/* 给你的div添加这个类 */
.corner-triangle {
  width: 100%;
  /* 高度可以用百分比、vh等相对单位，比如 height: 50vh; */
  height: 250px;
  /* 核心：线性渐变实现三角形 */
  background: linear-gradient(to top right, transparent 50%, #ff4444 50%);
}

原理说明： #

• to top right 指定渐变方向是从左下角指向右上角
• transparent 50% 和 #ff4444 50% 表示在元素对角线位置（50%处）切换颜色，透明和实色各占一半，自然形成直角三角形

调整三角形大小： #

如果想要更小的三角形（比如占div宽度的20%），可以用calc()来精准控制分界点：

background: linear-gradient(to top right, transparent calc(100% - 20%), #ff4444 calc(100% - 20%));

这里的20%就是三角形直角边的长度占div宽度的比例，修改这个数值就能自由调整大小。

其他角落的适配： #

只需要修改渐变方向即可：

• 左上角：linear-gradient(to top left, transparent 50%, #ff4444 50%)
• 右下角：linear-gradient(to bottom right, transparent 50%, #ff4444 50%)
• 左下角：linear-gradient(to bottom left, transparent 50%, #ff4444 50%)

方法二：伪元素+边框（Border）方案 #

如果需要三角形独立于div背景（比如叠加在其他内容上），可以用伪元素配合边框实现：

.corner-triangle {
  position: relative;
  width: 100%;
  height: 250px;
  background: #f5f5f5; /* div自身背景 */
}

.corner-triangle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* 用百分比控制边框长度，这里的20%相对于父元素宽度 */
  border-left: 20% solid transparent;
  border-top: 20% solid #ff4444;
  /* 清除默认样式避免干扰 */
  line-height: 0;
  font-size: 0;
}

注意：边框的百分比单位是相对于父元素的宽度，所以如果div的宽高比例变化，三角形的形状可能会略有调整，适合宽高比例固定的场景。

试试上面的代码，调整百分比数值就能完美匹配你的需求啦！

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